How do I get the event.keyCode of the delete key?

events keypress keycode

40,946

Solution 1

Instead of keypress, use the keyup or keydown event: keypress is meant for PRINTABLE characters, whereas keydown will capture non-printing key presses including delete, backspace, and return. http://jsfiddle.net/5cNTn/9/

$('body').keydown(function(event){
    var letter = String.fromCharCode(event.which); 
    if(event.keyCode == 32){console.log('SPACE BAR');}
    if(event.keyCode == 46){console.log('Delete Key Pressed');}
    console.log(event); 
    console.log(event.keyCode); 
 });

Solution 2

Use keydown and modern JS!

document.addEventListener("keydown", function(event) {
    if (event.key === "Delete") {
        // Do something
    }
});

Modern style, lambda + destructuring

document.addEventListener("keydown", ({key}) => {
    if (key === "Delete") {
        // Do something
    }
})

40,946

Author by

Squirrl

^_^

Updated on July 09, 2022

Comments

Squirrl almost 2 years

$('body').keypress(function(event){

     if(event.keyCode == 46){console.log('Delete Key Pressed')}; //does not work

     if(event.keyCode == 32){console.log('SPACE BAR')}; //works
})

Why doesn't the delete key show up in THIS FIDDLE ?

Squirrl over 10 years

Nice. Will backspace or delete have effects on the browser window that I could cancel?
Max over 10 years

Yep! In some browsers backspace returns to the previous page- preventDefault can help.
Squirrl over 10 years

Like this if(event.keyCode == 46){event.preventDefault(); console.log('Delete Key Pressed');} ?
Max over 10 years

yep! But keep in mind that this may also impact pressing backspace to delete text in editable input fields :-)
fizch over 6 years

That is good info on keypress vs keydown for printable characters.