How to capture a backspace on the onkeydown event

Question

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

User · Answer

event key      quot Backspace quot  or  quot Delete quot  More recent and much cleaner  use event key  No more arbitrary number codes  input addEventListener  keydown   function event        const key   event key     const  key    event  ES6      if  key      quot Backspace quot     key      quot Delete quot             return false             Mozilla Docs Supported Browsers

User · Answer

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

User · Answer

Nowadays  code to do this should look something like   document getElementById  foo   addEventListener  keydown   function  event        if  event keyCode    8            console log  BACKSPACE was pressed                Call event preventDefault   to stop the character before the cursor            from being deleted  Remove this line if you don t want to do that          event preventDefault              if  event keyCode    46            console log  DELETE was pressed                Call event preventDefault   to stop the character after the cursor            from being deleted  Remove this line if you don t want to do that          event preventDefault                although in the future  once they are broadly supported in browsers  you may want to use the  key or  code attributes of the KeyboardEvent instead of the deprecated  keyCode   Details worth knowing    Calling event preventDefault   in the handler of a keydown event will prevent the default effects of the keypress  When pressing a character  this stops it from being typed into the active text field  When pressing backspace or delete in a text field  it prevents a character from being deleted  When pressing backspace without an active text field  in a browser like Chrome where backspace takes you back to the previous page  it prevents that behaviour  as long as you catch the event by adding your event listener to document instead of a text field   Documentation on how the value of the keyCode attribute is determined can be found in section B 2 1 How to determine keyCode for keydown and keyup events in the W3 s UI Events Specification  In particular  the codes for Backspace and Delete are listed in B 2 3 Fixed virtual key codes  There is an effort underway to deprecate the  keyCode attribute in favour of  key and  code  The W3 describe the  keyCode property as  legacy   and MDN as  deprecated    One benefit of the change to  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  which is highly relevant to this question  is distinguishing between the meaning of a modified keypress and the physical key that was pressed   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 key model lets you choose   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    Unfortunately  as of writing this answer  they re only supported in 18  of browsers  so if you need broad compatibility you re stuck with the  legacy   keyCode attribute for the time being  But if you re a reader from the future  or if you re targeting a specific platform and know it supports the new interface  then you could write code that looked 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

User · Answer

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

User · Answer

In your function check for the keycode 8  backspace  or 46  delete   Keycode information Keycode list

[javascript] How to capture a backspace on the onkeydown event

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

Examples related to javascript

Examples related to onkeydown