Cancel the keydown in HTML

Question

How can I cancel the keydown of a specific key on the keyboard, for example(space, enter and arrows) in an HTML page.

Answer 1

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;
    }
};

Answer 2

Catch the keydown event and return false. It should be in the lines of:

<script>
document.onkeydown = function(e){
  var n = (window.Event) ? e.which : e.keyCode;
  if(n==38 || n==40) return false;
}
</script>

(seen here)

The keycodes are defined here

edit: update my answer to work in IE

Answer 3

This is certainly very old thread. In order to do the magic with IE10 and FireFox 29.0.1 you definitely must do this inside of keypress (not keydown) event listener function:

if (e.preventDefault) e.preventDefault();

Answer 4

I only develop for IE because my works requires it, so there is my code for numeric field, not a beauty but works just fine

    $(document).ready(function () {

    $("input[class='numeric-field']").keydown(function (e) {

        if (e.shiftKey == 1) {
            return false
        }

        var code = e.which;
        var key;

        key = String.fromCharCode(code);

        //Keyboard numbers   
        if (code >= 48 && code <= 57) {
            return key;
        } //Keypad numbers
        else if (code >= 96 && code <= 105) {
            return key
        } //Negative sign
        else if (code == 189 || code == 109) {
            var inputID = this.id;
            var position = document.getElementById(inputID).selectionStart
            if (position == 0) {
                return key
            }
            else {
                e.preventDefault()
            }
        }// Decimal point
        else if (code == 110 || code == 190) {
            var inputID = this.id;
            var position = document.getElementById(inputID).selectionStart

            if (position == 0) {
                e.preventDefault()
            }
            else {
                return key;
            }
        }// 37 (Left Arrow), 39 (Right Arrow), 8 (Backspace) , 46 (Delete), 36 (Home), 35 (End)
        else if (code == 37 || code == 39 || code == 8 || code == 46 || code == 35 || code == 36) {
            return key
        }
        else {
            e.preventDefault()
        }
    });

});

Answer 5

jQuery has a nice KeyPress function which allows you to detect a key press, then it should be just a case of detecting the keyvalue and performing an if for the ones you want to ignore.

edit: for example:

$('#target').keypress(function(event) {
  if (event.keyCode == '13') {
     return false; // or event.preventDefault();
  }
});

Answer 6

Just return false. Beware that on Opera this doesn't work. You might want to use onkeyup instead and check the last entered character and deal with it. Or better of use JQuery KeyPress