Capturing "Delete" Keypress with jQuery

JqueryKeypress

Jquery Problem Overview


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.

Jquery Solutions


Solution 1 - Jquery

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 - Jquery

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

Source: javascript char codes key codes from www.cambiaresearch.com</sup>

Solution 3 - Jquery

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 - Jquery

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

Solution 5 - Jquery

You can track the delete/ backspace key with jQuery as follow:

 $(document).keyup(function(e){
   if(e.key === "Backspace") {
    alert('Delete key/ backspace');
   }
 });

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionShane HView Question on Stackoverflow
Solution 1 - JqueryPhilippe LeybaertView Answer on Stackoverflow
Solution 2 - JqueryTod PalinView Answer on Stackoverflow
Solution 3 - JquerycsonuryilmazView Answer on Stackoverflow
Solution 4 - JqueryGiboltView Answer on Stackoverflow
Solution 5 - JqueryDanhddsView Answer on Stackoverflow