Monday, March 19th, 2007

Cross Browser Keyboard Handler

Category: Browsers, JavaScript, Library

<>p>Santosh Rajan has struggled with keyboard handling across browsers.

His article discusses some of the pain, and he came up with a simple wrapper to help out:

javascript
< view plain text >
  1. document.onkeydown = function(e) {handleKeys(e)}
  2. document.onkeypress = function(e) {handleKeys(e)}
  3. var nonChar = false;
  4.  
  5. function handleKeys(e) {
  6.     var char;
  7.     var evt = (e) ? e : window.event;       //IE reports window.event not arg
  8.     if (evt.type == "keydown") {
  9.         char = evt.keycode;
  10.         if (char < 16 ||                    // non printables
  11.             (char > 16 && char < 32) ||     // avoid shift
  12.             (char > 32 && char < 41) ||     // navigation keys
  13.             char == 46) {                   // Delete Key (Add to these if you need)
  14.             handleNonChar(char);            // function to handle non Characters
  15.             nonChar = true;
  16.         } else
  17.             nonChar = false;
  18.     } else {                                // This is keypress
  19.         if (nonChar) return;                // Already Handled on keydown
  20.         char = (evt.charCode) ?
  21.                    evt.charCode : evt.keyCode;
  22.         if (char > 31 && char < 256)        // safari and opera
  23.             handleChar(char);               //
  24.     }
  25.     if (e)                                  // Non IE
  26.         Event.stop(evt);                    // Using prototype
  27.     else if (evt.keyCode == 8)              // Catch IE backspace
  28.         evt.returnValue = false;            // and stop it!
  29. }

Related Content:

4 Comments »

Comments feed TrackBack URI

That’s pretty handy without the need to download a whole framework just for keyboard detection.

It’ll be useful later on when we add Ajax to our product.

Liming
Jumptree Project management
http://www.jumptree.com

Comment by Liming Xu — March 19, 2007

I have created a function to handle Keyboard shortcuts. My approach completely abstracts the handling – you just have to specify the key combination and the function to be called when that combination is pressed – Handling Keyboard Shortcuts in JavaScript

Comment by Binny V A — March 21, 2007

Great solution, I look forward to trying it. Thanks.

Comment by SlackAlice — September 13, 2007

I have just tried this wrapper and it is simple and very effective, I would cetrainly recommend giving it a try.

Comment by The Chauffeur — September 29, 2007

Leave a comment

You must be logged in to post a comment.