CODEWITHSUNDEEP
javascripthtmlkeydown
Jack
Jack

Reputation: 223

Cancel the keydown in HTML

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

Upvotes: 22

Views: 53592

Answers (6)

Tim Down
Tim Down

Reputation: 324537

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

Upvotes: 24

Alexis J. Normandia
Alexis J. Normandia

Reputation: 9

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

});

Upvotes: 0

Nebojša Gojnić
Nebojša Gojnić

Reputation: 19

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();

Upvotes: 1

marcgg
marcgg

Reputation: 66436

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

Upvotes: 5

redben
redben

Reputation: 5686

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

Upvotes: 0

Luke Duddridge
Luke Duddridge

Reputation: 4347

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

Upvotes: 0

Related Questions