Обв’язування клавіш зі стрілками в JS / jQuery

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

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 сучасне рішення для виявлення клавіш зі стрілками.

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

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

37 - зліва

38 - вгору

39 - справа

40 - вниз

Ви можете використовувати keyCode клавіш зі стрілками (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;
  }
});

Перевірте наведений вище приклад тут .

Це трохи пізно, але HotKeys має дуже велику помилку, яка спричиняє події виконуватись декілька разів, якщо ви приєднаєте до елемента кілька гарячих клавіш. Просто використовуйте звичайний jQuery.

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

Я просто поєднав найкращі шматочки з інших відповідей:

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

Ви можете використовувати 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/

Непересічне рішення з використанням простого 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 .

Ви впевнені, що jQuery.HotKeys не підтримує клавіші зі стрілками? Я переплутався з їх демонстрацією раніше і спостерігав, як працювали ліворуч, праворуч, вгору та вниз, коли я тестував його в IE7, Firefox 3.5.2 та Google Chrome 2.0.172 ...

EDIT : Схоже, jquery.hotkeys було переміщено до Github: https://github.com/jeresig/jquery.hotkeys

Замість використання, return false;як у наведених вище прикладах, ви можете використовувати те, e.preventDefault();що робить те саме, але простіше зрозуміти та прочитати.

Приклад чистого js, що йде вправо або вліво

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

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

            }
        });

Ви можете використовувати jQuery прив'язку:

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

Ви можете перевірити, arrow keyчи натиснуто:

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

запобігти стрілка доступна лише для будь-якого іншого об'єкта SELECT, ну насправді я не перевіряв інший об'єкт LOL. але він може зупинити подію зі стрілкою на сторінці та тип введення.

Я вже намагаюся блокувати стрілку вліво і вправо, щоб змінити значення об'єкта SELECT, використовуючи "e.preventDefault ()" або "повернути помилку" на подію "kepress", "keydown" та "keyup", але вона все одно змінює значення об'єкта. але подія все ще говорить вам, що стрілка була натиснута.

Надійна бібліотека 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
    }
});

Я прийшов сюди, шукаючи простий спосіб дозволити користувачеві, орієнтуючись на вхід, використовувати клавіші зі стрілками для позначення +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);
    }
}); 

З кавою та 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()