Обнаружение нажатия клавиши со стрелкой в IE через javascript/jQuery
Я пытаюсь настроить меню, которое можно перемещать с помощью клавиш со стрелками. У меня этот рабочий плагин в Firefox.
Попытка заставить его работать в IE8 и после некоторой битвы обнаружила, что это потому, что IE8 не зарегистрировал нажатие клавиш на стрелках. Чтобы проверить:
$(document).keypress(function (eh){
alert(eh.keyCode);
};
В Firefox нажатие любой из клавиш со стрелками вызовет оповещение о 37, 38, 39 или 40.
В IE8 ничего. Любой другой ключ на стандартной QWERTY-клавиатуре будет зарегистрирован, но не клавиши со стрелками.
Это проблема с моим Javascript? Настройка браузера? Настройка Windows?
Ответы
Ответ 1
Из jQuery keypress
документации (последний абзац вводного текста):
Обратите внимание, что keydown
и keyup
предоставляют код, указывающий, какая клавиша нажата, а keypress
указывает, какой символ был введен. Например, нижний регистр "a" будет отображаться как 65 на keydown
и keyup
, а как 97 на keypress
. В верхнем регистре "А" сообщается как 97 по всем событиям. Из-за этого различия при выборе особых нажатий клавиш, таких как клавиши со стрелками, .keydown()
или .keyup()
- лучший выбор.
Он даже буквально упоминает о клавишах со стрелками;) Таким образом, вам действительно нужно подключаться к событиям keydown
или keyup
. Здесь SSCCE с keydown
, просто скопируйте'paste'n'run. Нет, вам не нужно выполнять проверку совместимости с браузером на event
, это работает во всех браузерах от IE6 до Firefox.
<!doctype html>
<html lang="en">
<head>
<title>SO question 2217553</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).keydown(function(event) {
switch (event.keyCode) {
case 37: alert('left'); break;
case 38: alert('up'); break;
case 39: alert('right'); break;
case 40: alert('down'); break;
}
});
</script>
</head>
<body>
<p>Press one of the arrow keys.</p>
</body>
</html>
Ответ 2
Попробуйте следующее:
$(document).keydown(function (e) {
if(!e) {
e = window.event;
}
switch(e.keyCode) {
case 37:
goLeft();
break;
case 39:
goRight();
break;
}
});
Ответ 3
Используйте событие "keydown"
Ответ 4
Поскольку я иногда не хочу, чтобы события вызывали пузырьки для некоторых клавиш, я использую что-то вроде:
Настройте коды/клавиши по своему усмотрению.
/* handle special key press */
function checkCptKey(e)
{
var shouldBubble = true;
switch (e.keyCode)
{
// user pressed the Tab
case 9:
{
$(".someSelect").toggleClass("classSelectVisible");
shouldBubble = false;
break;
};
// user pressed the Enter
case 13:
{
$(".someSelect").toggleClass("classSelectVisible");
break;
};
// user pressed the ESC
case 27:
{
$(".someSelect").toggleClass("classSelectVisible");
break;
};
};
/* this propogates the jQuery event if true */
return shouldBubble;
};
/* user pressed special keys while in Selector */
$(".mySelect").keydown(function(e)
{
return checkCptKey(e);
});