Archives

Categories

«
»


Overriding the backspace key using JavaScript, in Firefox, IE, Opera and Safari

Posted by jimblackler on Sep 21, 2007

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

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.

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

Yesterday I had an email query recently asking how this was done so I’ve detailed it here.

There’s a demo here. Select ‘View Source’ in your browser to see how it’s done.


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

4 Comments »

Charlie Reams:

It seems that Firefox (at least current versions) also respects document.onkeypress, so if you register trapfunction as a handler for that then it gets called twice for every keypress. You can get around this either by detecting Opera specifically (and registering document.onkeypress for that browser only), or by catching onkeyup as well and making ignoring any future calls to onkeydown until onkeyup has been seen. Both of these solutions are hacky, but I can’t come up with anything more robust.

September 21st, 2007 | 9:18 pm
jimblackler:

In the demo I had a single handler for simplicity, in the Qindar game control I had two handlers. I’d advise having a separate handler for each event, make sure both return false if the key char is 8. Only carry out your application’s key actions in onkeydown (or onkeypress if you want the key repeat behaviour).

September 21st, 2007 | 10:21 pm
Mohammad:

Thanx. it is very usefull

July 11th, 2009 | 9:34 am
LGB:

Unfortunately JavaScript’s keyboard event handling is a big mess. There are some keys which can be only captured as keydown events, some of as keypress events, and it even varies that what kind of event type is used by different browsers for a given key. I am tried to develop a little ajax based console as a hobby (and learn some new things), it’s quite complicated to work on every (or at least the most known) browsers … Some standard would be wonderful …

Just try to follow this document: http://unixpapa.com/js/key.html

But anyway thanks for your post, I’ve missed the return value of the event handlers it seems and this post helped me to find my mistake!

November 24th, 2010 | 3:12 pm
Leave a Reply

Comment