crossbrowser keypress for special keys (arrows,...) in javascript

Question

I am building a browser interface to a terminal. I need to catch both character (alphanumeric, dot, slash,...) and non-character key presses (arrows, F1-F12,...). Also, if the user holds some key down, it would be nice to get repeated keypresses (the function should be called repeatedly until key is released). The same goes for space key, characters,...

I want this to be as cross-browser as possible (jQuery keypress fails on that account). I have also tried using fork of jquery.hotkeys.js, but if I understand correctly, I can't catch both special and character keys in a single function (one should use keydown for former and keydown for the latter).

Is there a JS library that would allow me to catch both character and special keys?

I hope I'm not missing something obvious. :)

UPDATE To clarify: I am looking for the library that would hide the browser implementation details from me.

Timothy

You dont need any. Do you have any problems with some particular browser and onkeydown? – Gwenn

Each browser implements key events a bit differently and I wasn't able to find a library that would mend all these differences in a suitable way. – Timothy

Answer 1

I ended up using keycode.js, but am building a whole event-managing system around keydown, keypress and keyup events, because just one of the events (keydown) is not enough to determine which character was entered and which key was pressed if there is no corresponding character. Browser incompatibilities are an added bonus to this challenge. :)

Thank you both for your answers, it has helped me understand the problem fully.

Timothy

Answer 2

The onkeydown it exactly what you need. It captures all keys, even if you are holding a button it is fired repeatedly.

<input type='text' onkeydown='return myFunc(this,event)'>

<script>
   function myFunc(Sender,e){
     var key = e.which ? e.which : e.keyCode;

     if(key == someKey){ // cancel event and do something
        ev.returnValue = false;
        if(e.preventDefault) e.preventDefault();
        return false;
     }
   }
</script>

UPDATE try and test this with jQuery

$(document).ready(function(){
$('#in').keydown(fn);
});

var cnt = 0;
function fn(e){
   var key = e.keyCode ? e.keyCode : e.which;
   cnt++;

   if(cnt == 10) {
  alert('event was fired 10 times. Last time with key: '+key);
      cnt = 0;
   }
}

Gwenn

are you sure it is fired repeatedly? According to this (see 2.2) and my tests this is not so. – Timothy

I am quite sure about it, I use it with navigation in my grid component, when user holds up/down arrow. Tested in IE7+/FF/Chrome – Gwenn

If a modifier key is held down, in some browsers it may repeatedly fire a keypress event, not keyup or keydown. In some browsers it will. – Pompey

Well, maybe we could say in all major browsers it will. In Safari it works too. And as far as I can remeber also in Opera. – Gwenn

Well, it doesn't work on the browser I use (Iceweasel, based on FF 3.5.16). :) Note that FF 3.5 is not ancient, it just looks so because of Mozilla numbering choices. The solution does work in FF7.0.1 and IE9 though... not perfect, but if there is no better, I'll have to go that route. Thanks for pointing it out to me! – Timothy

Can you test if on pure FF3.5? I think I started with FF3 or even maybe with FF2. – Gwenn

Sorry, don't have one at hand - but IceWeasel should be identical to FF with exception of backported security patches. – Timothy

Answer 3

The DOM 3 Events spec includes key events, but it's still a working draft so likely not that widely supported yet but should be pretty helpful.

For turning key codes into characters, you might find Quriskmode helpful. Knowing which key was pressed and which modifiers should get you where you want to be. Note that you may have issues mapping all keyboards to the same character sets because some have keys that others don't (e.g. Microsoft "windows" key and Apple command key). A bit of trial and error might be required.

Oh, and you might find the article JavaScript Madness: Keyboard Events interesting.

Pompey

Thanks for the links, I have found them already. I guess I wasn't clear enough - the question is "how can I avoid this madness?" :) – Timothy

You can probably get 95% fairly easily, but the last 5% will be really tough. e.g. the command (Apple) key on Mac gives code 91 in Safari but 224 in Firefox. On Mac, many function keys never get to the browser, they do other things (e.g. Expose actions). – Pompey