Элемент: событие keyup

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Событие keyup срабатывает при отпускании клавиши.

События keydown и keyup предоставляют код, указывающий, какая клавиша нажата, в то время как keypress указывает, какой символ был введён. Например, строчная буква "a" будет отображаться как 65 в keydown и keyup, но как 97 в keypress. Заглавная буква "A" отображается как 65 во всех событиях.

Целью события для события нажатия клавиши является элемент, в данный момент имеющий фокус и обрабатывающий действия клавиатуры. Это включает в себя: <input>, <textarea>, всё, что имеет свойство contentEditable, и всё остальное, с чем можно взаимодействовать с помощью клавиатуры, например, <a>, <button> и <summary>. Если подходящий элемент не имеет фокуса, целевым элементом события будет <body> или корень. Если событие не обрабатывается, оно поднимается по дереву DOM до достижения Document.

Целевой элемент события может изменяться между различными событиями нажатия клавиш. Например, целевой элемент для нажатия клавиши Tab будет отличаться от целевого элемента для keyup, потому что фокус изменился.

Синтаксис

Используйте имя события в методах, таких как addEventListener(), или установите свойство обработчика события.

addEventListener("keyup", (event) => {});

onkeyup = (event) => {};

Тип события

Событие KeyboardEvent. Наследуется от UIEvent и Event.

Свойства события

Этот интерфейс также наследует свойства своих родительских интерфейсов, UIEvent и Event.

KeyboardEvent.altKey Только для чтения: Возвращает булевое значение, равное true, если клавиша Alt (Option или ⌥ на macOS) была активна при генерации события нажатия клавиши.
KeyboardEvent.code Только для чтения: Возвращает строку со значением кода физической клавиши, представленной событием.

Предупреждение: Это игнорирует раскладку клавиатуры пользователя, поэтому, если пользователь нажимает клавишу в позиции "Y" на раскладке QWERTY (около середины ряда над основной), это всегда вернёт "KeyY", даже если у пользователя раскладка QWERTZ (что означало бы, что пользователь ожидает "Z", а все остальные свойства указывали бы на "Z") или раскладка Dvorak (где пользователь ожидал бы "F"). Если вы хотите отобразить правильные нажатия клавиш пользователю, вы можете использовать Keyboard.getLayoutMap().
KeyboardEvent.ctrlKey Только для чтения: Возвращает булевое значение, равное true, если клавиша Ctrl была активна при генерации события нажатия клавиши.
KeyboardEvent.isComposing Только для чтения: Возвращает булевое значение, равное true, если событие срабатывает между compositionstart и до compositionend.
KeyboardEvent.key Только для чтения: Возвращает строку, представляющую значение клавиши, представленной событием.
KeyboardEvent.location Только для чтения: Возвращает число, представляющее расположение клавиши на клавиатуре или другом вводном устройстве. Список констант, определяющих расположения, показан в разделе Расположения клавиатуры.
KeyboardEvent.metaKey Только для чтения: Возвращает булевое значение, равное true, если клавиша Meta (на клавиатурах Mac, клавиша ⌘ Command; на клавиатурах Windows, клавиша Windows (⊞)) была активна при генерации события нажатия клавиши.
KeyboardEvent.repeat Только для чтения: Возвращает булевое значение, равное true, если клавиша удерживается, что приводит к автоматическому повторению.
KeyboardEvent.shiftKey Только для чтения: Возвращает булевое значение, равное true, если клавиша Shift была активна при генерации события нажатия клавиши.

Примеры

Пример addEventListener keyup

В этом примере регистрируется значение KeyboardEvent.code всякий раз, когда вы отпускаете клавишу внутри элемента <input>.

<input placeholder="Click here, then press and release a key." size="40" />
<p id="log"></p>

const input = document.querySelector("input");
const log = document.getElementById("log");

input.addEventListener("keyup", logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}

События keyup с IME

С Firefox 65, события keydown и keyup теперь срабатывают во время композиции Input method editor, чтобы улучшить кросс-браузерную совместимость для пользователей CJKT (баг Firefox 354358). Чтобы проигнорировать все события keyup которые являются частью композиции, сделайте следующее:

eventTarget.addEventListener("keyup", (event) => {
  if (event.isComposing) {
    return;
  }
  // do something
});

Примечание: В отличие от keydown, события keyup не имеют специальных значений keyCode для событий IME. Однако, как и keydown, событие compositionstart может произойти после keyup при вводе первого символа, открывающего IME, и compositionend может произойти до keyup при вводе последнего символа, закрывающего IME. В этих случаях, isComposing имеет значение false, даже если событие является частью композиции.

Спецификации

Спецификация
UI Events # event-type-keyup
HTML # handler-onkeyup

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`keyup_event`	1	12	6	≤12.1	1.2	18	6	≤12.1	1	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event