Привязка клавиш со стрелками в JS/jQuery
Как привязать функцию к клавишам со стрелками влево и вправо в Javascript и/или jQuery? Я посмотрел на плагин JS-hotkey для jQuery (обертывает встроенную функцию привязки, чтобы добавить аргумент для распознавания определенных клавиш), но он, похоже, не поддерживает клавиши со стрелками.
16 ответов
$(document).keydown(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)
});
поместите свой пользовательский код для клавиш со стрелками между соответствующими case
и break
линии.
e.which
нормализуется jQuery, поэтому он работает во всех браузерах. Для чистого подхода javascript замените первые две строки на:
document.onkeydown = function(e) {
e = e || window.event;
switch(e.which || e.keyCode) {
(edit 2017)
Если вы чувствуете фантазии, вы можете использовать e.key
вместо e.which
или e.keyCode
сейчас. e.key
становится рекомендуемым стандартом, позволяющим вам проверка строки: 'ArrowLeft'
, 'ArrowUp'
, 'ArrowRight'
, 'ArrowDown'
. Новые браузеры поддерживают его изначально, регистрация здесь.
$(document).keydown(function(e){
if (e.keyCode == 37) {
alert( "left pressed" );
return false;
}
});
коды символов:
37 - левый
38-up
39 - правый
40 - вниз
вы можете использовать код клавиши со стрелками (37, 38, 39 и 40 влево, вверх, вправо и вниз):
$('.selector').keydown(function (e) {
var keyCode = e.keyCode || e.which,
arrow = {left: 37, up: 38, right: 39, down: 40 };
switch (keyCode) {
case arrow.left:
//..
break;
case arrow.up:
//..
break;
case arrow.right:
//..
break;
case arrow.down:
//..
break;
}
});
Проверьте приведенный выше пример здесь.
это немного поздно, но горячие клавиши имеют очень серьезную ошибку, которая заставляет события выполняться несколько раз, если вы присоединяете более одной горячей клавиши к элементу. Просто используйте простой 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.Горячие клавиши не поддерживают клавиши со стрелками? Я возился с их демонстрацией раньше и наблюдал слева, справа, вверх и вниз, когда я тестировал ее в IE7, Firefox 3.5.2 и Google Chrome 2.0.172...
редактировать: появляется jquery.хоткеи переехал на 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 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');
}
});
вы можете проверить wether arrow key
нажата:
$(document).keydown(function(e){
if (e.keyCode > 36 && e.keyCode < 41) {
alert( "arrowkey pressed" );
return false;
}
});
запретить стрелку доступна только для любого другого объекта выберите, ну на самом деле у меня нет tes на другом объекте LOL. но он может остановить событие стрелки на странице и типе ввода.
Я уже пытаюсь заблокировать стрелки влево и вправо, чтобы изменить значение SELECT object с помощью "e.preventDefault () "или" return false "на" 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()