CODEWITHSUNDEEP
javascriptonkeydown
Raphael
Raphael

Reputation: 8192

How to capture a backspace on the onkeydown event

I have a function that is triggered by the onkeydown event of a textbox. How can I tell if the user has hit either the backspace key or the del key?

Upvotes: 87

Views: 262831

Answers (5)

Gibolt
Gibolt

Reputation: 47097

event.key === "Backspace" or "Delete"

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

input.addEventListener('keydown', ({key}) => {
    if (key === "Backspace" || key === "Delete") {
        return false;
    }
});

Mozilla Docs

Supported Browsers

Upvotes: 35

Mark Amery
Mark Amery

Reputation: 154635

As long as you're okay not supporting ancient browsers, use the .key or .code attributes of the KeyboardEvent. These are supported in over 97% of users' browsers as of July 2023. Code to use them should look something like this:

document.getElementById('foo').addEventListener('keydown', function (event) {
    if (event.code == 'Delete') {
        console.log('The physical key pressed was the DELETE key');
    }
    if (event.code == 'Backspace') {
        console.log('The physical key pressed was the BACKSPACE key');
    } 
    if (event.key == 'Delete') {
        console.log('The keypress meant the same as pressing DELETE');
        // This can happen for one of two reasons:
        // 1. The user pressed the DELETE key
        // 2. The user pressed FN+BACKSPACE on a small Mac keyboard where
        //    FN+BACKSPACE deletes the character in front of the text cursor,
        //    instead of the one behind it.
    }
    if (event.key == 'Backspace') {
        console.log('The keypress meant the same as pressing BACKSPACE');
    }
});

If for some reason you need to support ancient browsers, code to do this should instead use the deprecated .keyCode attribute (though see discussion below of why this older interface is inferior):

document.getElementById('foo').addEventListener('keydown', function (event) {
    if (event.keyCode == 8) {
        console.log('BACKSPACE was pressed');
    }
    if (event.keyCode == 46) {
        console.log('DELETE was pressed');
    }
});

One benefit of the change from the legacy .keyCode to the newer .key and .code is having more powerful and programmer-friendly handling of non-ASCII keys - see the specification that lists all the possible key values, which are human-readable strings like "Backspace" and "Delete" and include values for everything from modifier keys specific to Japanese keyboards to obscure media keys. Another benefit is that the new interface distinguishes between the meaning of a modified keypress and the physical key that was pressed.

This is, it turns out, highly relevant to this question! On small Mac keyboards, there is no Delete key, only a Backspace key. However, pressing Fn+Backspace is equivalent to pressing Delete on a normal keyboard - that is, it deletes the character after the text cursor instead of the one before it. Depending upon your use case, in code you might want to handle a press of Backspace with Fn held down as either Backspace or Delete. That's why the new interface lets you choose which to check for.

The .key attribute gives you the meaning of the keypress, so Fn+Backspace will yield the string "Delete". The .code attribute gives you the physical key, so Fn+Backspace will still yield the string "Backspace".

Upvotes: 29

Stephano
Stephano

Reputation: 5866

Try this:

document.addEventListener("keydown", KeyCheck);  //or however you are calling your method
function KeyCheck(event)
{
   var KeyID = event.keyCode;
   switch(KeyID)
   {
      case 8:
      alert("backspace");
      break; 
      case 46:
      alert("delete");
      break;
      default:
      break;
   }
}

Upvotes: 130

Mathieu
Mathieu

Reputation: 5695

not sure if it works outside of firefox:

callback (event){
  if (event.keyCode === event.DOM_VK_BACK_SPACE || event.keyCode === event.DOM_VK_DELETE)
    // do something
  }
}

if not, replace event.DOM_VK_BACK_SPACE with 8 and event.DOM_VK_DELETE with 46 or define them as constant (for better readability)

Upvotes: 0

jasonbar
jasonbar

Reputation: 13461

In your function check for the keycode 8 (backspace) or 46 (delete)

Keycode information
Keycode list

Upvotes: 8

Related Questions