how can i track arrow keys in Chrome and IE?

问题:

Im using foloowing code to track key events

oEvent=window.event || oEvent;     iKeyCode=oEvent.keyCode || oEvent.which;alert(iKeyCode); 

its giving me alerts in firefox but not in IE and chrome. Its giving me all the other keyborad characters but not esc key and arrow keys.

How can i detect esc key and arrow keys in chrome and IE using javascript??

回答1:

You don't really need JQuery, though it does make your code shorter.

You will have to use the keyDown event, keyPress will not work in old versions of IE for the arrow keys.

There is a full tutorial here that you can use, see the example with arrow keys close to the bottom of the page: http://www.cryer.co.uk/resources/javascript/script20_respond_to_keypress.htm

Here's some code I used, a bit simplified since I had to handle repeated keypresses with buffering:

document.onkeydown = function(event) {      if (!event)           event = window.event;      var code = event.keyCode;      if (event.charCode && code == 0)           code = event.charCode;      switch(code) {           case 37:               // Key left.               break;           case 38:               // Key up.               break;           case 39:               // Key right.               break;           case 40:               // Key down.               break;      }      event.preventDefault(); }; 

回答2:

I've just faced same problem. There is at least one difference Chrome handles the keypress and keydown/keyup events. keypress event in Chrome is not fired for arrow keys, whereas for keydown and keyup it is.

回答3:

problem: webkit sends a keycode 38 (up arrow) to keypress when you do shift-7 (ampersand).

summary: & and up both equal 38. % and left both equal 37. ' and right both equal 39. ( and down both equal 40. for firefox and opera, the 37/38/39/40 aren't sent for &, %, ', (. they only send those for up, down, left, right. but webkit and ie send 37/38/39/40 for both arrow keys and &, %, ', (. note that for up/down/left/right, webkit sets charCode to 0, but not for &, %, ', (.

solution: so if you handling those events by keycode, you need to either ignore when the shift key is down or check if the charCode is 0

• Best Resource: http://unixpapa.com/js/key.html
• Test a browser: http://asquare.net/javascript/tests/KeyCode.html
• bugs.jquery.com/ticket/7300. "This is done to match IE. keypress events are only supposed to fire for keys that insert characters. Note that keydown/keyup do fire for arrow keys."
• Interesting project: github.com/OscarGodson/jKey

回答4:

Use jQuery and use something like this:

$(document).keydown(function(e){     if (e.keyCode == 37) {          alert( "left pressed" );         return false;     } }); 

Character codes:

37: left

38: up

39: right

40: down

回答5:

Demo

Try using the jquery library to do what you need and then call below. In the demo you can click in the input box and then start typing. It will alert you with the key code. You can bind that event listener to any element of your page. It doesn't have to just be an input.

$(document).ready(function() {      KEY_CODES = {       37: 'left',       38: 'up',       39: 'right',       40: 'down'     }      KEY_STATUS = { keyDown:false };     for (code in KEY_CODES) {       KEY_STATUS[KEY_CODES[code]] = false;     }      $(window).keydown(function (e) {        KEY_STATUS.keyDown = true;        // perform functionality for keydown       if (KEY_CODES[e.keyCode]) {           e.preventDefault();           alert('arrow');           if(e.keyCode == 40)           {               // Arrow Down            }            else if(e.keyCode == 39)           {               // Arrow Right               }            else if(e.keyCode == 38)           {               // Arrow Up               }            else if(e.keyCode == 37)           {               // Arrow Left               }        }      }).keyup(function (e) {       KEY_STATUS.keyDown = false;       if (KEY_CODES[e.keyCode]) {                   e.preventDefault();         KEY_STATUS[KEY_CODES[e.keyCode]] = false;       }     });  }); 

回答6:

Here is a terse formulation:

document.onkeydown = function(e) {     switch (e.keyCode) {         case 37:             alert('left');             break;         case 38:             alert('up');             break;         case 39:             alert('right');             break;         case 40:             alert('down');             break;     } }; 

However, if you are using JQuery, you are better off using e.which, which JQuery "normalizes" to account for cross-browser differences:

$(document).keydown(function(e) {     switch(e.which) {         // the rest is the same 

回答7:

This worked for me in Opera20 and IE8. (I don't have Chrome to test with.)

var keyPressListenerFn = function(event) {     if (!event){ event = window.event }     var code = event.charCode && event.keyCode == 0 ? event.charCode : event.keyCode     switch(code) {         case 37: prev(); break // left         case 39: next(); break // right     }     if (event.preventDefault){ event.preventDefault() } // opera20     if (event.returnValue){ event.returnValue = false } // ie8 } var addEvent = document.attachEvent ? document.attachEvent : document.addEventListener addEvent('keydown', keyPressListenerFn)   // opera20 addEvent('onkeydown', keyPressListenerFn) // ie8 

文章来源: how can i track arrow keys in Chrome and IE?