Виявлення натискання клавіш зі стрілками в JavaScript


458

Як виявити натискання однієї із клавіш зі стрілками? Я використовував це для з'ясування:

function checkKey(e) {
    var event = window.event ? window.event : e;
    console.log(event.keyCode)
}

Хоча вона працювала і для будь-якої іншої клавіші, вона не була для клавіш зі стрілками (можливо, тому, що браузер повинен прокручувати ці клавіші за замовчуванням).

Відповіді:


733

Клавіші зі стрілками спрацьовує лише onkeydown, не onkeypress.

Ключові коди:

  • зліва = 37
  • вгору = 38
  • справа = 39
  • вниз = 40

15
Деякі браузери запускають keypressподії для клавіш зі стрілками, але ви праві, що keydownзавжди працюють для клавіш зі стрілками.
Tim Down

4
Якщо натиснути%, ви також отримаєте keyCode 37
xorcus

9
@xorcus - Ні, ви отримаєте 53з keydownподією. Ви отримуєте 37з keypressІнша справа
Марк Кан

7
А як щодо onkeyup?
1nfiniti

2
@MrCroft - або також слухати onkeyupта зупиняти подію там. Реально ви не повинні змінювати поведінку інтерфейсу користувача через Javascript.
Марк Кан

225

Функція виклику вгору та вниз на клавіші. Для кожного ключа існують різні коди.

document.onkeydown = checkKey;

function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '38') {
        // up arrow
    }
    else if (e.keyCode == '40') {
        // down arrow
    }
    else if (e.keyCode == '37') {
       // left arrow
    }
    else if (e.keyCode == '39') {
       // right arrow
    }

}

Що робить другий рядок?
eshellborn

16
Для уточнення 'e || window.event 'означає, що якщо' e 'є визначеним значенням, це буде результатом' || ' вираз. Якщо 'e' не визначено, 'window.event' буде результатом '||' вираз. Так це в основному скорочення: e = e ? e : window.event; Або:if (typeof(e) === "undefined") { e = window.event; }
Майкл Кальвін

17
Це змусити його працювати на старих версіях IE (до IE9), де подія не була передана у функцію обробника.
Марк Родос

12
Просто зауважте, що keyCode - це число, і === в ідеалі слід використовувати
alexrogers

11
@ketan справа в тому, що keyCode є числом і його слід перевіряти як keyCode === 32, ні keyCode == '32'або keyCode === '32'.
Ненотлеп

98

event.key === "ArrowRight" ...

Більш свіжі та набагато чистіші: використання event.key. Більше немає довільних кодів номерів! Якщо ви перекладаєте або знаєте, що всі користувачі в сучасних браузерах, використовуйте це!

node.addEventListener('keydown', function(event) {
    const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
});

Докладна обробка:

switch (event.key) {
    case "ArrowLeft":
        // Left pressed
        break;
    case "ArrowRight":
        // Right pressed
        break;
    case "ArrowUp":
        // Up pressed
        break;
    case "ArrowDown":
        // Down pressed
        break;
}

Ви можете легко розширити це, щоб перевірити "w", "a", "s", "d", чи будь-який інший ключ

Документи Mozilla

Підтримувані браузери

PS event.codeте ж саме для стрілок


5
Дякуємо за те, що ви користуєтесь, keyале не keyCode, це було застаріло.
v010dya

8
Примітка від MDN: Internet Explorer, Edge (16 і новіші версії) та Firefox (36 і новіші версії) використовують замість "ArrowLeft", "ArrowRight", "ArrowUp" замість "ArrowLeft", "ArrowRight", "ArrowUp" "та" ArrowDown ".
Саймон

95

Можливо, найкоротший склад:

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

Демо (спасибі користувачеві Angus Grant): http://jsfiddle.net/angusgrant/E3tE6/

Це має працювати крос-браузер. Залиште коментар, якщо є браузер, де він не працює.

Існують й інші способи отримати код ключа (наприклад, e.charCode та window.event замість e), але вони не повинні бути необхідними. Більшість із них можна спробувати на веб- сайті http://www.asquare.net/javascript/tests/KeyCode.html . Зауважте, що event.keycode не працює з onkeypress у Firefox, але він працює з onkeydown.


3
Я повинен був подивитися визначення лаконічно , то я (sprightfully) припустив , що tersest був невідповідний дієвідміною; на жаль, я визнаю: моя розвага була спростована .
ashleedawg

20

Використовуйте keydown, не keypressдля недрукувальних клавіш, таких як клавіші зі стрілками:

function checkKey(e) {
    e = e || window.event;
    alert(e.keyCode);
}

document.onkeydown = checkKey;

Найкраща посилання на ключову подію JavaScript, яку я знайшов (наприклад, збиваючи штани з quirksmode), знаходиться тут: http://unixpapa.com/js/key.html


16

Сучасна відповідь, оскільки keyCode тепер застаріла на користь ключа :

document.onkeydown = function (e) {
    switch (e.key) {
        case 'ArrowUp':
            // up arrow
            break;
        case 'ArrowDown':
            // down arrow
            break;
        case 'ArrowLeft':
            // left arrow
            break;
        case 'ArrowRight':
            // right arrow
    }
};

12

Я вважаю, що останнім методом буде:

document.addEventListener("keydown", function(event) {
  event.preventDefault();
  const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
  switch (key) { // change to event.key to key to use the above variable
    case "ArrowLeft":
      // Left pressed
      <do something>
      break;
    case "ArrowRight":
      // Right pressed
      <do something>
      break;
    case "ArrowUp":
      // Up pressed
      <do something>
      break;
    case "ArrowDown":
      // Down pressed
      <do something>
      break;
  }
});

Це передбачає, що розробник хоче, щоб код був активним в будь-якій точці сторінки, і клієнт повинен ігнорувати будь-які інші натискання клавіш. Усуньте подію.preventDefault (); рядок, якщо натискання клавіш, включаючи натиснуті цим обробником, все ще повинні бути активними.


9
function checkArrowKeys(e){
    var arrs= ['left', 'up', 'right', 'down'], 
    key= window.event? event.keyCode: e.keyCode;
    if(key && key>36 && key<41) alert(arrs[key-37]);
}
document.onkeydown= checkArrowKeys;

1
Чи не варто ставити arrsпоза функції? Не потрібно відтворювати його кожен дзвінок
горе

8

Ось приклад реалізації:

var targetElement = $0 || document.body;

function getArrowKeyDirection (keyCode) {
  return {
    37: 'left',
    39: 'right',
    38: 'up',
    40: 'down'
  }[keyCode];
}

function isArrowKey (keyCode) {
  return !!getArrowKeyDirection(keyCode);
}

targetElement.addEventListener('keydown', function (event) {
  var direction,
      keyCode = event.keyCode;

  if (isArrowKey(keyCode)) {
    direction = getArrowKeyDirection(keyCode);

    console.log(direction);
  }
});

Я отримую 0 доларів не визначено var targetElement = typeof $0 !== 'undefined' ? $0 : document.body; або просто: var targetElement = document.body;добре
папо

7

Ось як я це зробив:

var leftKey = 37, upKey = 38, rightKey = 39, downKey = 40;
var keystate;
document.addEventListener("keydown", function (e) {
    keystate[e.keyCode] = true;
});
document.addEventListener("keyup", function (e) {
    delete keystate[e.keyCode];
});

if (keystate[leftKey]) {
//code to be executed when left arrow key is pushed.
}
if (keystate[upKey]) {
//code to be executed when up arrow key is pushed.
}
if (keystate[rightKey]) {
//code to be executed when right arrow key is pushed.
}
if (keystate[downKey]) {
//code to be executed when down arrow key is pushed.
}

5

Мені вдалося вловити їх jQuery:

$(document).keypress(function (eventObject) {
    alert(eventObject.keyCode);
});

Приклад: http://jsfiddle.net/AjKjU/


4
keypressне працюватиме з клавішами зі стрілками. Ви повинні скористатися $(document).on('keydown', function() {...})натомість
Юрібіян

4

Це робочий код для chrome та firefox

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript">

    function leftArrowPressed() {
      alert("leftArrowPressed" );
      window.location = prevUrl  
    }

    function rightArrowPressed() {
      alert("rightArrowPressed" );
      window.location = nextUrl  
    }
    function topArrowPressed() {
      alert("topArrowPressed" );
      window.location = prevUrl  
    }

    function downArrowPressed() {
      alert("downArrowPressed" );
      window.location = nextUrl  
    }

        document.onkeydown = function(evt) {
                        var nextPage = $("#next_page_link")
                        var prevPage = $("#previous_page_link")
                        nextUrl = nextPage.attr("href")
                        prevUrl = prevPage.attr("href")
        evt = evt || window.event;
        switch (evt.keyCode) {
                case 37:
                leftArrowPressed(nextUrl);
                break;

                case 38:
                topArrowPressed(nextUrl);
                break;

                 case 39:
                rightArrowPressed(prevUrl);
                break;

                case 40:
                downArrowPressed(prevUrl);
                break;

        }
    };


</script>
</head>
<body>
<p>
<a id="previous_page_link" href="http://www.latest-tutorial.com">Latest Tutorials</a> 
<a id="next_page_link" href="http://www.zeeshanakhter.com">Zeeshan Akhter</a>
 </p>
</body>
</html>

3

Я також шукав цю відповідь, поки не натрапив на цю посаду.

Я знайшов інше рішення, щоб знати код коду різних клавіш, люб’язно ставлячись до моєї проблеми. Я просто хотів поділитися своїм рішенням.

Просто використовуйте подію клавіатури / клавіші, щоб записати значення в консоль / попереджувати те саме, використовуючи event.keyCode. подібно до-

console.log(event.keyCode) 

// or

alert(event.keyCode)

- рупам



3

Ця бібліотека гойдається! https://craig.is/killing/mice

Mousetrap.bind('up up down down left right left right b a enter', function() {
    highlight([21, 22, 23]);
});

Потрібно натиснути послідовність трохи швидко, щоб виділити код на цій сторінці.


2

Відповіді, які вам keydownне потрібні keypress.

Припускаючи, що ви хочете щось постійно переміщувати під час натискання клавіші, я вважаю, що це keydownпрацює для всіх браузерів, крім Opera. Для «Опери» keydownспрацьовує лише перша натискання. Для розміщення Opera використовуйте:

document.onkeydown = checkKey;
document.onkeypress = checkKey;
function checkKey(e)
{ etc etc

2

Клавіші зі стрілками спрацьовують при клавіатурі

$(document).on("keyup", "body", function(e) {
 if (e.keyCode == 38) {
    // up arrow
    console.log("up arrow")
  }
  if (e.keyCode == 40) {
      // down arrow
      console.log("down arrow")
  }
  if (e.keyCode == 37) {
    // left arrow
    console.log("lefy arrow")
  }
  if (e.keyCode == 39) {
    // right arrow
    console.log("right arrow")
  }
})

onkeydown дозволяє ctrl, alt, shits

onkeyup дозволяє вкладки, стрілки вгору, стрілки вниз, стрілки вліво, стрілки вниз


1

Якщо ви використовуєте jquery, то ви також можете зробити так,

 $(document).on("keydown", '.class_name', function (event) {
    if (event.keyCode == 37) {
        console.log('left arrow pressed');
    }
    if (event.keyCode == 38) {
        console.log('up arrow pressed');
    }
    if (event.keyCode == 39) {
        console.log('right arrow pressed');
    }
    if (event.keyCode == 40) {
        console.log('down arrow pressed');
    }
 });

0

керуйте кодами клавіш %=37і &=38... і лише ліві клавіші зі стрілками = 37 вгору = 38

function IsArrows (e) {
   return ( !evt.shiftKey && (e.keyCode >= 37 && e.keyCode <= 40)); 
}

0

Якщо ви хочете виявити натискання клавіш зі стрілками, але не потрібно конкретних в JavaScript

function checkKey(e) {
   if (e.keyCode !== 38 || e.keyCode !== 40 || e.keyCode !== 37 || e.keyCode !== 39){
    // do something
   };
}

0

З ключем та ES6.

Це дає окрему функцію для кожної клавіші зі стрілкою без використання перемикача, а також працює з клавішами 2,4,6,8 у цифровій клавіатурі, коли NumLockвона увімкнена.

const element = document.querySelector("textarea"),
  ArrowRight = k => {
    console.log(k);
  },
  ArrowLeft = k => {
    console.log(k);
  },
  ArrowUp = k => {
    console.log(k);
  },
  ArrowDown = k => {
    console.log(k);
  },
  handler = {
    ArrowRight,
    ArrowLeft,
    ArrowUp,
    ArrowDown
  };

element.addEventListener("keydown", e => {
  const k = e.key;

  if (handler.hasOwnProperty(k)) {
    handler[k](k);
  }
});
<p>Click the textarea then try the arrows</p>
<textarea></textarea>

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.