{"id":20,"date":"2007-09-21T12:06:15","date_gmt":"2007-09-21T11:06:15","guid":{"rendered":"http:\/\/jimblackler.com\/blog\/?p=20"},"modified":"2007-09-24T14:18:20","modified_gmt":"2007-09-24T13:18:20","slug":"overriding-the-backspace-key-in-javascript-in-firefox-ie-opera-and-safari","status":"publish","type":"post","link":"https:\/\/jimblackler.com\/?p=20","title":{"rendered":"Overriding the backspace key using JavaScript, in Firefox, IE, Opera and Safari"},"content":{"rendered":"

In my web wordgame Qindar.net I wanted to allow the players to use the keyboard to place words on the game board. This included use of the arrow keys to navigate, and the backspace key to ‘delete’ wrongly placed letters.<\/p>\n

The problem is that even when this is handled in JavaScript, most browsers still catch the backspace key and interpret it as a user request to go back to the previous page. Boom! There goes your game page, and one annoyed user.<\/p>\n

I did find a way of masking the backspace key that works in all the browsers I have tested it against. The trick for most browsers is to override the onkeydown event, check for event number “8” and return ‘false’ from that event. This signals to the browser not to process that key.<\/p>\n

As often happens one particular browser is troublesome, in this case it was Opera, that needed “onkeypress” overriding rather than “onkeydown”.<\/p>\n

Yesterday I had an email query recently asking how this was done so I’ve detailed it here.<\/p>\n

There’s a demo here<\/a>. Select ‘View Source’ in your browser to see how it’s done.<\/p>\n


\n<\/a><\/p>\n

\n\n\t\n\t
\n\t\t
  1. <!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd"><\/span><\/div><\/li>\n
  2. <html<\/span> xmlns=<\/span>"http:\/\/www.w3.org\/1999\/xhtml"<\/span> ><\/span><\/div><\/li>\n
  3. <head<\/span>><\/span><\/div><\/li>\n
  4.     <title<\/span>><\/span>Backspace Browser Trap Demo<\/<\/span>title<\/span>><\/span><\/div><\/li>\n
  5.  <\/div><\/li>\n
  6. <\/<\/span>head<\/span>><\/span><\/div><\/li>\n
  7. <body<\/span>><\/span><\/div><\/li>\n
  8.  <\/div><\/li>\n
  9. <p<\/span>><\/span>Try pressing backspace on this page.<\/<\/span>p<\/span>><\/span><\/div><\/li>\n
  10. <p<\/span>><\/span>Note you can still go 'back' with Alt + Left<\/<\/span>p<\/span>><\/span><\/div><\/li>\n
  11. <p<\/span> id<\/span>=<\/span>"keypressed"<\/span>><\/<\/span>p<\/span>><\/span><\/div><\/li>\n
  12.    <script<\/span> type<\/span>=<\/span>"text\/javascript"<\/span> language<\/span>=<\/span>"javascript"<\/span>><\/span><\/div><\/li>\n
  13.     <\/div><\/li>\n
  14.     \/\/ function to possibly override keypress<\/div><\/li>\n
  15.     trapfunction = function(event)<\/div><\/li>\n
  16.     {<\/div><\/li>\n
  17.         var keynum;<\/div><\/li>\n
  18.         <\/div><\/li>\n
  19.         if (window.event) \/\/ eg. IE<\/div><\/li>\n
  20.         {<\/div><\/li>\n
  21.             keynum = window.event.keyCode;<\/div><\/li>\n
  22.         }<\/div><\/li>\n
  23.         else if (event.which) \/\/ eg. Firefox<\/div><\/li>\n
  24.         {<\/div><\/li>\n
  25.             keynum = event.which;<\/div><\/li>\n
  26.         }<\/div><\/li>\n
  27.  <\/div><\/li>\n
  28.         if (keynum == 8) \/\/ backspace has code 8<\/div><\/li>\n
  29.         {<\/div><\/li>\n
  30.             document.getElementById("keypressed").innerHTML = "Backspace pressed";<\/div><\/li>\n
  31.             \/\/ display a message<\/div><\/li>\n
  32.  <\/div><\/li>\n
  33.             return false;<\/div><\/li>\n
  34.             \/\/ nullifies the backspace<\/div><\/li>\n
  35.         }<\/div><\/li>\n
  36.         return true;<\/div><\/li>\n
  37.     }<\/div><\/li>\n
  38.     <\/div><\/li>\n
  39.     document.onkeyup = function(event)<\/div><\/li>\n
  40.     {<\/div><\/li>\n
  41.         document.getElementById("keypressed").innerHTML = ""; \/\/ clear the message<\/div><\/li>\n
  42.         <\/div><\/li>\n
  43.         return true;<\/div><\/li>\n
  44.     }<\/div><\/li>\n
  45.     <\/div><\/li>\n
  46.     document.onkeydown = trapfunction; \/\/ IE, Firefox, Safari<\/div><\/li>\n
  47.     document.onkeypress = trapfunction; \/\/ only Opera needs the backspace nullifying in onkeypress<\/div><\/li>\n
  48.     <\/div><\/li>\n
  49.     <\/<\/span>script<\/span>><\/span><\/div><\/li>\n
  50.  <\/div><\/li>\n
  51. <\/<\/span>body<\/span>><\/span><\/div><\/li>\n
  52. <\/<\/span>html<\/span>><\/span><\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"

    In my web wordgame Qindar.net I wanted to allow the players to use the keyboard to place words on the game board. This included use of the arrow keys to navigate, and the backspace key to ‘delete’ wrongly placed letters. The problem is that even when this is handled in JavaScript, most browsers still catch […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-20","post","type-post","status-publish","format-standard","hentry","category-web-development"],"_links":{"self":[{"href":"https:\/\/jimblackler.com\/index.php?rest_route=\/wp\/v2\/posts\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jimblackler.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jimblackler.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jimblackler.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jimblackler.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=20"}],"version-history":[{"count":0,"href":"https:\/\/jimblackler.com\/index.php?rest_route=\/wp\/v2\/posts\/20\/revisions"}],"wp:attachment":[{"href":"https:\/\/jimblackler.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jimblackler.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jimblackler.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}