CODEWITHSUNDEEP
javascripteventskeyboard
developer
developer

Reputation: 2050

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

Upvotes: 14

Views: 18511

Answers (7)

Gaurav
Gaurav

Reputation: 12806

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

Upvotes: 21

Nick Grealy
Nick Grealy

Reputation: 25942

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

Upvotes: 0

1''
1''

Reputation: 27125

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

Upvotes: 0

Overflow289
Overflow289

Reputation: 121

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

Upvotes: 7

Piotr Salaciak
Piotr Salaciak

Reputation: 1663

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.

Upvotes: 13

jnoreiga
jnoreiga

Reputation: 2174

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

});

Upvotes: 2

Matthew Riches
Matthew Riches

Reputation: 2286

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

Upvotes: 3

Related Questions