SyntaxError on "function x.y () {...}"? - javascript

How can I fix the following javascript error ? This is a handler for an ASP.NET page to disable postbacks when the enter key is pressed:
<script type="text/javascript">
function document.onkeydown() {
if (event.keyCode == 13) {
event.returnValue = false;
event.cancel = true;
}
}
</script>

Note that document.onkeydown is not a valid function name. You probably wanted to do this:
document.onkeydown = function(ev) {
if (ev.keyCode == 13) {
// ...
}
Or better:
document.addEventListener('keydown', function(ev) {
if (ev.keyCode == 13) {
// ...
});

To add to maerics answer, to get access to the event, you need it as an argument...
document.addEventListener( 'keydown', function( event ) {
console.log( event, event.keyCode );
if (event.keyCode == 13) {
event.returnValue = false;
event.cancel = true;
}
});

Related

addEventListener input keycode not working

Is there a way of getting the Keycode that is being pressed when addEventListener inputis fired?
<p contentEditable="true" id="newTask">New task</p>
document.getElementById("newTask").addEventListener("input", function(e) {
if(e.keyCode == 13 || e.which == 13)
{
console.log("input event fired");
// return false; // returning false will prevent the event from bubbling up.
}
else
{
console.log("others: " + e);
// return true;
}
}, false);
This is because you should be using the keypress event, rather than input.
Try the following:
document.getElementById("newTask").addEventListener("keypress", function(e) {
if(e.keyCode == 13 || e.which == 13)
{
console.log("input event fired");
// return false; // returning false will prevent the event from bubbling up.
}
else
{
console.log("others: " + e);
// return true;
}
}, false);

how detect CTRL+q in javascript

How detect ctrl+q with javascript, this is my code
<body>
<p id="x"></p>
<script>
window.onkeydown = function() {detect(event);}
window.onkeypress = function() {res(event);}
var act = false;
function detect(event) {
if(event.ctrlKey) {
act = true;
}
else
act = false;
}
function res(event) {
if(act) {
document.getElementById("x").innerHTML = "ctrl " + String.fromCharCode(event.which);
}
else
document.getElementById("x").innerHTML = String.fromCharCode(event.which);
}
</script>
</body>
I want do it with javascript only.
You can detect it using the following function:
document.addEventListener("keydown", function (event) {
event.stopPropagation();
event.preventDefault();
if(event.ctrlKey && event.keyCode == 81)
{
console.log("CTRL + Q was pressed!");
}
else
{
console.log("Something else was pressed.");
}
});
The stopPropagation() and preventDefault() calls prevent the browser's default behaviour from occurring.
If you want to detect other keys, this page is rather useful: http://asquare.net/javascript/tests/KeyCode.html

Key pressed and click in the same time

how can I merge keypress and on click? I mean when a user press enter and click somewhere in the same time I need to invoke a function.
$(document).keypress(function(e) {
var code = e.keyCode || e.which;
if(code == 13) {
alert('keypress');
}
});
$(document).on( "click", function() {
alert('click');
});
I have this code but I am not able to merge it (usually I don't work with jQuery/javascript).
Something like this may do the trick
var pressingEnter = false;
$(document).on({
keydown: function(e) {
if(e.which == 13) {
// enter is being pressed, set true to flag variable
pressingEnter = true;
}
},
keyup: function(e) {
if(e.which == 13) {
// enter is no longer pressed, set false to flag variable
pressingEnter = false;
}
},
click: function() {
if (pressingEnter) {
console.log('click and enter pressed');
}
}
});
BTW: there is no need to do var code = e.keyCode || e.which; since jQuery resolves that for you. You can use e.which on any browser.
EDIT
This version should allow any order of key pressed / mouse click. I'm assuming only left click is captured. Logic to handle enter + mouse click is placed on keydown and mousedown (it could be moved to keyup and mouseup if makes more sense)
Changed alert by console.log since the first prevents mouseup event to be triggered. Nowdays we have hundred of better ways to show a message to user than built-in alert pop ups so I'll assume making it work for it is not a requirement.
var pressingEnter = false;
var clickingMouseButton = false;
$(document).on({
keydown: function(e) {
if(e.which == 13) {
pressingEnter = true;
}
if (clickAndEnterPressing()) {
console.log('click and enter pressed');
}
},
keyup: function(e) {
if(e.which == 13) {
pressingEnter = false;
}
},
mousedown: function(e) {
if (e.which == 1) {
clickingMouseButton = true;
}
if (clickAndEnterPressing()) {
console.log('click and enter pressed');
}
},
mouseup: function(e) {
if (e.which == 1) {
clickingMouseButton = false;
}
}
});
function clickAndEnterPressing() {
return pressingEnter && clickingMouseButton;
}
Here's an example that will work if enter is pushed first or if the mouse is clicked first or if they are both pressed within a certain threshold of time apart (I set it to 100 ms, but this can be easily adjusted):
var enterDown = false;
var mouseDown = false;
var lastEnter = false;
var lastMouseUp = false;
var triggerOnNextUp = false;
$(document).on({
keydown: function(e) {
enterDown = true;
},
keyup: function(e) {
if(e.which == 13) {
lastEnter = (new Date()).getTime();
enterDown = false;
detectEnterAndClick();
if (mouseDown) {
triggerOnNextUp = true;
}
}
},
mousedown: function() {
mouseDown = true;
},
mouseup: function() {
lastMouseUp = (new Date()).getTime();
mouseDown = false;
detectEnterAndClick();
if (enterDown) {
triggerOnNextUp = true;
}
}
});
function detectEnterAndClick() {
if (Math.abs(lastEnter - lastMouseUp) < 100 || triggerOnNextUp) {
// Reset variables to prevent from firing twice
triggerOnNextUp = false;
enterDown = false;
mouseDown = false;
lastEnter = false;
lastMouseUp = false;
$("body").append("Clicked and pushed enter<br>");
}
}
See it on JSFiddle
There is no way to 'merge' events. However you could for example debounce your handler. For example (using lodash):
var handler = _.debounce(function(event) { alert(event.type); }, 100);
$(document)
.on('click', handler)
.on('keypress', handler);
you can use the event.type to determine what triggered the event
Demo
$(function(){
$(document).on("click", ClickAndKeyPress);
$(document).on("keypress", ClickAndKeyPress);
});
function ClickAndKeyPress(event){
$("div").text(event.type);
}

keydown event not fired, why?

In JavaScript, I hold two keys down, and keydown is fired perfectly. When I release one of the keys, keyupis fired. So far so good. But I am still holding one key down, so why arent keydown fired? I need this to happen in my game. Am I doing something wrong? Is this the expected response? Is there a work around or something?
window.addEventListener("keydown",
function (e) {
console.log('down');
}, false);
window.addEventListener('keyup',
function (e) {
console.log('up');
}, false);
Looks to me like you're trying to do something like this:
var down = false;
var up = false;
document.body.addEventListener('keydown', function (e) {
if(e.which === 40) {
down = true;
}
if(e.which === 38) {
up = true;
}
});
document.body.addEventListener('keyup', function (e) {
if(e.which === 40) {
down = false;
}
if(e.which === 38) {
up = false;
}
// logic here for one but not the other
if(down && !up) {
alert('down but not up!');
}
});

Keyboard shortcut not working

I am using HandsOnTable jquery plugin, and I'm trying to handle a specific key combination (Alt+v) shortcut. But it is not working for some reason, here is my code and jsfiddle:
$(document).ready(function () {
var isCtrl = false;
var isShift = false;
var isAlt = false;
// action on key up
$(document).keyup(function (e) {
if (e.which == 17) {
isCtrl = false;
}
if (e.which == 16) {
isShift = false;
}
if (e.which == 18) {
isAlt = false;
}
});
// action on key down
$(document).keydown(function (e) {
if (e.which == 17) {
isCtrl = true;
}
if (e.which == 16) {
isShift = true;
}
if (e.which == 18) {
isAlt = true;
}
if (e.which == 86 && isAlt) //alt+v
{
console.log("alt+v detected");
e.preventDefault();
e.stopImmediatePropagation();
return false;
}
});
});
I'm using chromium and it looks like all the keydown events do not fire. I found out there is a beforeKeyDown callback, which can be used to "modify keybindings". Using that seems to work:
$('#example').handsontable({
data: data,
minSpareRows: 1,
colHeaders: true,
contextMenu: true,
beforeKeyDown: function (e) {
if (e.altKey === true && e.which === 86) {
console.log("alt-v");
e.stopImmediatePropagation();
e.preventDefault();
}
}
});
http://jsfiddle.net/JdzR3/
Since you're using jQuery, you can use the altkey property on the event.
$(document).on('keydown', function(e){
var key = e.which || e.keyCode;
if(e.altKey === true && key === 86){
console.log("Alt+v");
}
});
See https://developer.mozilla.org/en-US/docs/Web/API/event.altKey for more about that and other key events.

Categories