Как провести различие между клавишами «Enter» и «Return» в Javascript? - PullRequest
Новая
       3

Как провести различие между клавишами «Enter» и «Return» в Javascript?

17 голосов
/ 24 марта 2011

Некоторые настольные приложения по-разному обрабатывают клавишу «возврат каретки» и клавишу ввода «numpad».Я заметил, что эти два ключа генерируют один и тот же keyCode (13) в Javascript (jQuery).

Они преобразованы, чтобы быть равными в среде браузера, или есть возможность различить их (т.е. makeCR создает новую строку в текстовой области, а клавиша 'enter' отправляет свою форму?

Ответы [ 3 ]

15 голосов
/ 24 марта 2011

См. Трактат Яна Уолтерса о Javascript Madness: События клавиатуры .

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

UPDATE

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

Из Сети разработчиков Mozilla :

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

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

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

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

DOM_KEY_LOCATION_NUMPAD 3 Ключ был на цифровом или имеет виртуальный код клавиши, соответствующий числовому клавиатура.

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

9 голосов
/ 13 января 2015

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

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

Тесты onkeydown показывают, что когда нажата «обычная» клавиша ввода, keyCode = 13 и location = 0; когда нажата ввод с клавиатуры, keyCode = 13 и location = 3.

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

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....
}
1 голос
/ 22 июня 2017

Я предоставляю обновление, поскольку этот вопрос по-прежнему отображается в верхней части результатов поиска 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 enter», в то время как event.code вернет "Enter" и "NumpadEnter" соответственно.

В этом случае, если вы хотите провести различие между клавишами цифровой клавиатуры и клавиатуры, вы можете использовать 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's key and code values are for  each one.
</p>
<div id="output"></div>
...