Capturing "Delete" Keypress with jQuery

When using the example code from the jQuery documentation for the keypress event handler, I'm unable to capture the Delete key. The snippet below is going to log 0 when the Delete key is pressed in FireFox:

$(document).keypress(function(e) {
    console.log(e.which);       
});

Seems there's gotta be a way to capture the Delete key, but it's an ambiguous term so Google isn't proving to be much help with it.


Solution 1:

You shouldn't use the keypress event, but the keyup or keydown event because the keypress event is intended for real (printable) characters. keydown is handled at a lower level so it will capture all nonprinting keys like delete and enter.

Solution 2:

$('html').keyup(function(e){
    if(e.keyCode == 46) {
        alert('Delete key released');
    }
});

Source: javascript char codes key codes from www.cambiaresearch.com

Solution 3:

Javascript Keycodes

  • e.keyCode == 8 for backspace
  • e.keyCode == 46 for forward backspace or delete button in PC's

Except this detail Colin & Tod's answer is working.

Solution 4:

event.key === "Delete"

More recent and much cleaner: use event.key. No more arbitrary number codes!

NOTE: The old properties (.keyCode and .which) are Deprecated.

document.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Delete") {
        // Do things
    }
});

Mozilla Docs

Supported Browsers