Cancel the Keydown in HTML

Cancel the keydown in HTML

If you're only interested in the example keys you mentioned, the keydown event will do, except for older, pre-Blink versions of Opera (up to and including version 12, at least) where you'll need to cancel the keypress event. It's much easier to reliably identify non-printable keys in the keydown event than the keypress event, so the following uses a variable to set in the keydown handler to tell the keypress handler whether or not to suppress the default behaviour.

Example code using addEventListener and ignoring ancient version of Opera

document.addEventListener("keydown", function(evt) {
    // These days, you might want to use evt.key instead of keyCode
    if (/^(13|32|37|38|39|40)$/.test("" + evt.keyCode)) {
        evt.preventDefault();
    }
}, false);

Original example code from 2010

var cancelKeypress = false;

document.onkeydown = function(evt) {
    evt = evt || window.event;
    cancelKeypress = /^(13|32|37|38|39|40)$/.test("" + evt.keyCode);
    if (cancelKeypress) {
        return false;
    }
};

/* For pre-Blink Opera */
document.onkeypress = function(evt) {
    if (cancelKeypress) {
        return false;
    }
};

how to cancel keydown on mobile browsers

Well after creating a stripped down test page, I discovered that Chrome always interprets keys pressed using the Android keyboard as keyCode 229 in the keydown event. If I plugged my phone into my computer with the USB cable, keys I pressed on my desktop keyboard used the correct keycode, but the ones on the phone's virtual keyboard were all 229. After some more research I found this:

keyCode on android is always 229

However, I can't figure out why it works if I put breakpoints in and step through it.

Stop keypress event

function onKeyDown(event) {   
  event.preventDefault();
}

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-preventDefault

or

function onsubmit(event) {
  return false;
}

return false to stop events propagation

Remove keydown delay in JavaScript?

you could start an event on keydown and stop it on keyup

$('#mycanvas').on('keydown', function() { 
   $(document).trigger('start'); 
}); 

$('#mycanvas').on('keyup', function() { 
   $(document).trigger('stop'); 
});

$(document).on('start', startAnimation);
$(document).on('stop', stopAnimation);

function startAnimation(e) { //start something }
function stopAnimation(e) { //stop something }

Prevent keydown() from being captured by document binding

e.stopPropagation, or
e.preventDefault (depending on the situation)
Where e is the event.

Ex:

function onKeyDown(e) {
   doStuff();
   e.preventDefault();
}

---

Related Topics