Как я могу отслеживать клавиши со стрелками в Chrome и IE?

Ответ 1

Вам не нужен JQuery, хотя он делает ваш код короче.

Вам нужно будет использовать событие keyDown, keyPress не будет работать в старых версиях IE для клавиш со стрелками.

Здесь есть полный учебник, который вы можете использовать, см. пример со стрелочными клавишами в нижней части страницы: http://www.cryer.co.uk/resources/javascript/script20_respond_to_keypress.htm

Вот код, который я использовал, немного упрощен, так как мне пришлось обрабатывать повторяющиеся нажатия клавиш с буферизацией:

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

Я столкнулся с такой же проблемой. Существует по крайней мере одно отличие Chrome обрабатывает события keypress и keydown/keyup. Событие keypress в Chrome не запускается для клавиш со стрелками, тогда как для keydown и keyup оно есть.

Ответ 3

проблема: webkit отправляет код ключа 38 (стрелка вверх) для нажатия клавиши shift-7 (амперсанд).

сводка: и и оба равны 38.%, а оба равны 37. 'и правые оба равны 39. (и вниз оба равны 40. для firefox и opera, 37/38/39/40 не отправляются за &,%, ', (они отправляют только те, что указаны вверх, вниз, влево, вправо, но webkit и т.д. Отправляют 37/38/39/40 для обеих клавиш со стрелками и & %, ', (обратите внимание, что для up/down/left/right webkit устанавливает charCode в 0, но не для &,%,', (.

:, поэтому, если вы обрабатываете эти события по коду ключа, вам нужно либо игнорировать, когда клавиша shift выключена, либо проверить, является ли charCode 0

• Лучший ресурс: http://unixpapa.com/js/key.html
• Протестируйте браузер: http://asquare.net/javascript/tests/KeyCode.html
• bugs.jquery.com/ticket/7300. "Это делается для того, чтобы соответствовать IE. События keypress должны запускаться только для ключей, которые вставляют символы. Обратите внимание, что keydown/keyup срабатывают для клавиш со стрелками".
• Интересный проект: github.com/OscarGodson/jKey

Ответ 4

Используйте jQuery и используйте что-то вроде этого:

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

Коды символов:

37: left

38: вверх

39: right

40: вниз

Ответ 5

Демо

Попробуйте использовать библиотеку jquery, чтобы сделать то, что вам нужно, а затем позвоните ниже. В демо вы можете щелкнуть в поле ввода, а затем начать вводить текст. Он предупредит вас о key code. Вы можете связать этот прослушиватель событий с любым элементом вашей страницы. Это не просто вход.

$(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

Вот краткая формулировка:

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

Однако, если вы используете JQuery, вам лучше использовать e.which, который JQuery "нормализует" для учета различий между браузерами:

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

Ответ 7

Это работало для меня в Opera20 и IE8. (У меня нет Chrome для тестирования.)

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