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

admin管理员组

文章数量:1313599

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.

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.

• javascript
• keypress
• keydown
• keyup

Share Improve this question Follow edited Oct 7, 2011 at 12:45 johndodo asked Oct 7, 2011 at 12:17 johndodojohndodo 18.3k1717 gold badges101101 silver badges119119 bronze badges 2

• You dont need any. Do you have any problems with some particular browser and onkeydown? – Jan Pfeifer Commented Oct 7, 2011 at 13:04
• 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. – johndodo Commented Oct 11, 2011 at 14:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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;
   }
}

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 mand key). A bit of trial and error might be required.

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

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 inpatibilities are an added bonus to this challenge. :)

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

本文标签： crossbrowser keypress for special keys (arrows) in JavascriptStack Overflow