Как различать ключи 'Enter' и 'Return' в Javascript?

Ответ 1

См. доклад Джона Вултерса о Javascript Madness: События на клавиатуре.

Enter и Numpad Enter оба дают одинаковый код ключа, т.е. 13, поскольку браузеры не различают эти два ключа. Честно говоря, и в большинстве сред. Можно различать их с помощью Windows API (например), но для этого требуется дополнительное усилие. Это, однако, выходит за рамки абстракции браузеров.

UPDATE

Как справедливо отмечает Билл Торн , объект KeyboardEvent теперь обладает свойством location.

Из Mozilla Developer Network:

Возможные значения:

DOM_KEY_LOCATION_STANDARD 0 Ключ имеет только одна версия или не может быть разграничена между левым и правым версии ключа и не нажимались на цифровой клавиатуре или который считается частью клавиатуры.

DOM_KEY_LOCATION_LEFT 1 Ключ был левой клавишей; например, левая клавиша управления была нажата на стандартный 101 клавиатура США. Это значение используется только для ключей, которые имеют больше одно возможное расположение на клавиатуре.

DOM_KEY_LOCATION_RIGHT 2ключ был правой версией ключа; например, правой Клавиша управления нажата на стандартной 101-клавишной клавиатуре США. Это значение используется только для ключей, у которых есть больше одного возможного местоположения на клавиатура.

DOM_KEY_LOCATION_NUMPAD 3 Ключ был на числовом или имеет виртуальный key code, который соответствует числовому клавиатура.

Примечание. Когда NumLock заблокирован, Gecko всегда возвращает DOM_KEY_LOCATION_NUMPAD для клавиш на цифровой клавиатуре. В противном случае, когда NumLock разблокирован, и на клавиатуре на самом деле имеется числовое клавиатура, Gecko всегда возвращает DOM_KEY_LOCATION_NUMPAD. С другой если клавиатура не имеет клавиатуры, например, на ноутбуке компьютер, некоторые клавиши становятся Numpad только тогда, когда NumLock заблокирован. когда такие клавиши запускают ключевые события, значение атрибута местоположения зависит от ключ. То есть, это не должно быть DOM_KEY_LOCATION_NUMPAD. Заметка: События ключевого ключа NumLock показывают DOM_KEY_LOCATION_STANDARD как на Gecko и Internet Explorer.

Ответ 2

Если на клавиатуре есть физически другой ключ, браузерные приложения должны быть такими же способными, как и настольные приложения для дифференциации.

С последними версиями Chrome (39.0.2171.95 м), Firefox (32.0.3), IE (11.0.9600.17501) и Opera (12.17), объект события клавиатуры теперь имеет свойство location. Я бы предположил, что это свойство существует некоторое время, хотя оно легко документировано.

Тесты onkeydown показывают, что при нажатии клавиши "normal" введите keyCode = 13 и location = 0; когда нажат ввод numpad, keyCode = 13 и location = 3.

Таким образом, следующий код может использоваться для установки ключа == 13, если ввод, ключ == 176, если введите numpad:

window.onkeydown=function(ev)
{
    var e= ev || window.event,
      key = e.keyCode || e.which;

    if ((key==13) &&
        (e.location===3))
      key=176; // 176 is the scancode for the numpad enter
    // continued....
}

Ответ 3

Я предоставляю обновление, поскольку этот вопрос по-прежнему появляется в верхней части результатов поиска google.

За MDN, KeyboardEvent.keyCode и KeyBoardEvent.charCode устарели и больше не должны использоваться.

KeyboardEvent можно определить, обратившись к KeyboardEvent.key, KeyboardEvent.code и KeyboardEvent.location при необходимости.

KeyboardEvent.key возвращает обычно то, что вы видите в текстовом редакторе для выходных ключей и имя для клавиш без вывода (включая чувствительность к регистру).

KeyboardEvent.code возвращает строковое описание ключа.

KeyboardEvent.location возвращает целое число от 0 до 3, чтобы обозначить область клавиатуры, на которой находится ключ (стандартный, левый, правый и нулевой) соответственно.

Понимание разницы между этими свойствами может помочь определить, что будет наиболее подходящим для вашей конкретной ситуации. В случае возникновения этого вопроса: event.key вернет тот же результат ("Enter") как для "возврата каретки", так и для клавиш ввода numpad, а event.code вернет "Enter" и "NumpadEnter" соответственно.

В этом случае, если вы хотите различать клавиши numpad и клавиатуры, вы можете использовать event.code. Если вы хотите, чтобы их работа была одинаковой, event.key был бы лучшим выбором.

Если вы хотите различать другие ключи, такие как левый и правый клавиши Ctrl, вы также захотите посмотреть свойство event.location.

Я добавляю маленькую игровую площадку с клавиатурой, чтобы увидеть разницу между этими свойствами события. Подпишитесь MDN для предоставления концепции, что я только слегка измененный ниже:

window.addEventListener("keydown", function(event) {

  let str = "key = '" + event.key + 
              "' &nbsp code = '" + event.code + "'" + 
              "' &nbsp location = '" + event.location + "'" ;
              
  let el = document.createElement("span");
  
  el.innerHTML = str + "<br/>";
 
  document.getElementById("output").appendChild(el);
  
}, true);

#output {
  font-family: Arial, Helvetica, sans-serif;
  overflow-y: auto;
  margin-left: 4em
}

#output span {
  line-height: 2em;
}

#output :nth-child(2n) {
  color: blue;
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code -->

<p>
  Press keys on the keyboard to see what the KeyboardEvent key and code values are for  each one.
</p>
<div id="output"></div>

Ответ 4

Вы можете различать оба по свойству события code. Для numpad он возвращает NumpadEnter, а для другого - Enter. Кроме того, вы также можете использовать свойство location, которое работает во всех случаях, в отличие от свойства code. Для numpad Enter возвращает 3, тогда как для другого Enter возвращает 0.