Связывание клавиш со стрелками в JS / jQuery


418

Как мне связать функцию с клавишами со стрелками влево и вправо в Javascript и / или jQuery? Я посмотрел на плагин js-hotkey для jQuery (оборачивает встроенную функцию связывания, чтобы добавить аргумент для распознавания определенных клавиш), но, похоже, он не поддерживает клавиши со стрелками.


Ответы:


541
document.onkeydown = function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
};

Если вам нужно поддерживать IE8, запустите тело функции как e = e || window.event; switch(e.which || e.keyCode) {.


(редактировать 2020)
Обратите внимание, что KeyboardEvent.whichтеперь не рекомендуется. Посмотрите этот пример, используяKeyboardEvent.key более современное решение для обнаружения клавиш со стрелками.


28
Безусловно лучший ответ. Использует, e.whichкак jQuery рекомендует для кросс-браузер, использует e.preventDefault()вместо return false( return falseв обработчике событий jQuery вызывает оба e.preventDefault()и e.stopPropagation(), и второй, который будет вызывать сбой любых последующих добавленных событий, так как событие не будет распространяться на них), и на конец коммутатора, будет возвращаться без вызова, e.preventDefault()если это какая-то другая клавиша, кроме искомой, которая не мешает другому использованию ключа, и вместо $.ui.keyCode.DOWNэтого сравнивается с числами (НАМНОГО быстрее).
Джимбо Джонни

2
Натан: кажется, что не все коды клавиш совместимы между браузерами, но клавиши со стрелками - некоторые из них. Смотрите здесь: stackoverflow.com/questions/5603195/…
Sygmoral

1
@MichaelScheper - 1) переменные! = Константы, независимо от того, предназначены ли они для изменения или нет ... движку все еще приходится обращаться с ними как с переменными, пока константы ES6 не станут достаточно повсеместными, чтобы jQuery мог использовать константы 2) числа не являются действительно магические числа, когда рядом с ними есть комментарий, рассказывающий точно, что они есть, и 3) ... продолжение
Джимбо Джонни

2
... 3) при доступе $.ui.keyCode.DOWNвы ищите $в своей лексической области, не находя его, поднимаясь на уровень ... ищите $, повторяйте до тех пор, пока в глобальной области не найдете его в глобальном window, доступ $в окне, доступ uiв window.$, доступ keyCodeв window.$.ui, доступ DOWNна window.$.ui.keyCodeдобраться до примитивного значения , которое вы хотите сравнить, а затем сделать ваши фактическое сравнения. Независимо от того, имеет ли эта скорость значение для вас, это личное решение, я просто имею тенденцию избегать 4-х уровней доступа, когда есть такая ситуация, когда я могу так же легко написать / прокомментировать примитив.
Джимбо Джонни

1
@NathanArthur Здесь я нашел два хороших онлайн-инструмента для тестирования кодов клавиш клавиатуры: keycode.info asquare.net/javascript/tests/KeyCode.html unixpapa.com/js/key.html
Риккардо Вольпе,

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

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

37 - слева

38 - вверх

39 - справа

40 - вниз


4
Есть ли цель для возвращения?
Алекс С

19
Он останавливает любые дальнейшие события нажатия клавиш.
s_hewitt

9
Тень: нет, он имеет в виду, что он останавливает событие
нажатия клавиш

3
Кроме 39 тоже апостроф, не правда ли?
Пол Д. Уэйт

25
При использовании jQuery используйте, e.whichа не e.keyCodeдля большей поддержки браузера. Смотрите мой комментарий ниже.
Сигморал

108

Вы можете использовать код клавиши клавиш со стрелками (37, 38, 39 и 40 слева, вверх, вправо и вниз):

$('.selector').keydown(function (e) {
  var arrow = { left: 37, up: 38, right: 39, down: 40 };

  switch (e.which) {
    case arrow.left:
      //..
      break;
    case arrow.up:
      //..
      break;
    case arrow.right:
      //..
      break;
    case arrow.down:
      //..
      break;
  }
});

Проверьте приведенный выше пример здесь .


1
Я не уверен, что вы используете || оператор в строке 2. Разве значение, отличное от нуля или ненулевой реализации, не является гарантированным и не гарантируется? Я хотел бы использовать что-то вроде: var keyCode = (e.keyCode? E.keyCode: e.which); +1 за использование объекта стрелки, чтобы дать читаемым названиям дел.
Mnebuerquo

6
Если вы используете jQuery, вам не нужно проверять e.which: The event.which property normalizes event.keyCode and event.charCode- api.jquery.com/event.which
JCM

Я пытаюсь поставить ключевой приемник событий на столе, но это не сработает. Существует ли ограниченное количество типов селекторов, которые поддерживают ключевые прослушиватели событий?
Арман Биматов

23

Это немного поздно, но у HotKeys есть очень серьезная ошибка, которая приводит к тому, что события выполняются несколько раз, если вы присоединяете более одной горячей клавиши к элементу. Просто используйте простой jQuery.

$(element).keydown(function(ev) {
    if(ev.which == $.ui.keyCode.DOWN) {
        // your code
        ev.preventDefault();
    }
});

2
+1 за использование объекта ключевого кода пользовательского интерфейса. Гораздо проще понять, чем 37, 38, 39 или 40. Не уверен, почему верхний ответ использует e.keyCode, когда в документации jQuery прямо указано использование e.which для учета различий в браузере. Надеюсь, этот ответ получит больше признания за то, что сделал это правильно.
нет

2
Использование $ .ui.keyCode.DOWN при каждом нажатии клавиши НАМНОГО медленнее, чем использование числа. Просто добавьте комментарий, если вас беспокоит ясность, тем более что он должен запускаться при каждом нажатии любой клавиши.
Джимбо Джонни

16

Я просто объединил лучшие биты из других ответов:

$(document).keydown(function(e){
    switch(e.which) {
        case $.ui.keyCode.LEFT:
        // your code here
        break;

        case $.ui.keyCode.UP:
        // your code here
        break;

        case $.ui.keyCode.RIGHT:
        // your code here
        break;

        case $.ui.keyCode.DOWN:
        // your code here
        break;

        default: return; // allow other keys to be handled
    }

    // prevent default action (eg. page moving up/down)
    // but consider accessibility (eg. user may want to use keys to choose a radio button)
    e.preventDefault();
});

1
Откуда происходит "UI"? Получение "TypeError: $ .ui is undefined" РЕДАКТИРОВАТЬ - мне не хватало JQuery UI. Получил, что загружен - больше нет ошибки.
кодер

3
Он, очевидно, также использует пользовательский интерфейс jQuery, который должен иметь это перечисление. Кстати, я бы не включил jQuery UI.
Джетро Ларсон

14

Вы можете использовать KeyboardJS. Я написал библиотеку для задач, как это.

KeyboardJS.on('up', function() { console.log('up'); });
KeyboardJS.on('down', function() { console.log('down'); });
KeyboardJS.on('left', function() { console.log('right'); });
KeyboardJS.on('right', function() { console.log('left'); });

Оформить заказ библиотеки здесь => http://robertwhurst.github.com/KeyboardJS/


14

Краткое решение с использованием простого Javascript (спасибо Sygmoral за предложенные улучшения):

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

Также см. Https://stackoverflow.com/a/17929007/1397061 .


Вероятно, также стоит document.addEventListener('keydown', myFunction);
связать

9

Вы уверены, что jQuery.HotKeys не поддерживает клавиши со стрелками? Я уже порвал их демо-версию и наблюдал за работой влево, вправо, вверх и вниз, когда тестировал их в IE7, Firefox 3.5.2 и Google Chrome 2.0.172 ...

РЕДАКТИРОВАТЬ : кажется, jquery.hotkeys был перемещен в Github: https://github.com/jeresig/jquery.hotkeys


Я читал, где говорится, что он основан на другой библиотеке, и предположил, что список поддерживаемых ключей все еще применяется.
Алекс С

5

Вместо использования, return false;как в примерах выше, вы можете использовать то, e.preventDefault();что делает то же самое, но легче для понимания и чтения.


4
return false;и e.preventDefault();не совсем то же самое. См. Stackoverflow.com/a/1357151/607874
Хосе Руи Сантос

4

Пример чистого JS с движением вправо или влево

        window.addEventListener('keydown', function (e) {
            // go to the right
            if (e.keyCode == 39) {

            }
            // go to the left
            if (e.keyCode == 37) {

            }
        });

3

Вы можете использовать jQuery bind:

$(window).bind('keydown', function(e){
    if (e.keyCode == 37) {
        console.log('left');
    } else if (e.keyCode == 38) {
        console.log('up');
    } else if (e.keyCode == 39) {
        console.log('right');
    } else if (e.keyCode == 40) {
        console.log('down');
    }
});

2

Вы можете проверить arrow key, нажата ли кнопка :

$(document).keydown(function(e){
    if (e.keyCode > 36 && e.keyCode < 41) { 
       alert( "arrowkey pressed" );
       return false;
    }
});

0

предотвратить стрелку, доступную только для любого объекта, кроме SELECT, на самом деле у меня нет тестов на другом объекте LOL. но он может остановить событие стрелки на странице и тип ввода.

я уже пытаюсь заблокировать стрелку влево и вправо, чтобы изменить значение объекта SELECT с помощью «e.preventDefault ()» или «return false» для событий «kepress», «keydown» и «keyup», но оно все еще меняет значение объекта. но событие все еще говорит вам, что стрелка была нажата.


0

Надежная библиотека Javascript для ввода ввода с клавиатуры и введенных комбинаций клавиш. У него нет зависимостей.

http://jaywcjlove.github.io/hotkeys/

hotkeys('right,left,up,down', function(e, handler){
    switch(handler.key){
        case "right":console.log('right');break
        case "left":console.log('left');break
        case "up":console.log('up');break
        case "down":console.log('down');break
    }
});

0

Я пришел сюда в поисках простого способа позволить пользователю, когда он сфокусирован на вводе, использовать клавиши со стрелками для +1 или -1 для числового ввода. Я так и не нашел хорошего ответа, но сделал следующий код, который, кажется, отлично работает - сделав этот сайт сейчас.

$("input").bind('keydown', function (e) {
    if(e.keyCode == 40 && $.isNumeric($(this).val()) ) {
        $(this).val(parseFloat($(this).val())-1.0);
    } else if(e.keyCode == 38  && $.isNumeric($(this).val()) ) { 
        $(this).val(parseFloat($(this).val())+1.0);
    }
}); 

-1

С кофе и Jquery

  $(document).on 'keydown', (e) ->
    switch e.which
      when 37 then console.log('left key')
      when 38 then console.log('up key')
      when 39 then console.log('right key')
      when 40 then console.log('down key')
    e.preventDefault()
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.