JS властивість Event.keyup

Загальний опис

Подія keyup спрацьовує, коли користувач відпускає клавішу на клавіатурі після її натискання. Ця подія корисна для обробки текстового введення в реальному часі або для виконання певних дій після завершення введення символу. Наприклад, ви можете використовувати keyup для динамічного відображення введених даних або для перевірки правильності введення. На відміну від події keydown, яка спрацьовує при натисканні клавіші, keyup викликається вже після того, як клавіша була відпущена, тому її зручно використовувати для отримання фінального введеного символу.

Основні властивості об'єкта event, які часто використовуються при роботі з подією keyup:

• event.key — повертає символ або назву клавіші, яку було відпущено.
• event.code — повертає фізичний код клавіші незалежно від розкладки.
• event.altKey, event.ctrlKey, event.shiftKey — булеві значення, які показують, чи були натиснуті відповідні модифікатори.

Приклад використання події keyup для виведення натиснутої клавіші:

document.addEventListener('keyup', function(event) {
  console.log('Відпущена клавіша: ' + event.key);
});

Подія keyup часто використовується для створення полів пошуку, де результат оновлюється динамічно при введенні. Наприклад, можна створити функцію автозаповнення або пошукові підказки, які змінюються після відпускання кожної клавіші.

const inputField = document.getElementById('search');

inputField.addEventListener('keyup', function(event) {
  const searchTerm = event.target.value;
  console.log('Пошуковий запит: ' + searchTerm);
});

Ця подія також допомагає в ситуаціях, коли необхідно відстежувати комбінації клавіш, наприклад, для створення гарячих клавіш (shortcut keys). Крім того, вона дозволяє більш точно контролювати введення символів, оскільки спрацьовує після натискання, коли символ вже введений.

правити

Порада

Для обробки комбінацій клавіш, таких як Ctrl + Z, можна використовувати keyup в комбінації з властивостями event.ctrlKey, event.shiftKey або event.altKey, щоб перевіряти, чи натиснуті модифікатори.

автор: Bond правити

Порада

Подія keyup зручна для динамічного пошуку або фільтрації даних. Наприклад, можна викликати функцію пошуку після кожного введеного символу без потреби натискання Enter.

автор: Bond правити

Порада

Звертайте увагу на відмінності між event.key і event.code. Наприклад, при використанні різних мовних розкладок значення event.key може змінюватися, тоді як event.code залишається незмінним.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('keyup', function(event) {
  // Ваш код тут
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	6	1.2	≤12.1	12	9

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	6	1

Приклади

+ запропонувати свій приклад у пісочниці

<input type="text" id="lettersOnly" value="текст для прикладу" placeholder="Введи щось">

const inputField = document.getElementById('lettersOnly');

inputField.addEventListener('keyup', function(event) {
  const value = inputField.value;
  // Очищаємо поле від всіх символів, крім літер
  inputField.value = value.replace(/[^a-zA-Z]/g, '');
});

<input type="text" id="searchInput" value="текст для прикладу" placeholder="Введи щось">
<div id="results">Демонстраційний елемент</div>

const searchInput = document.getElementById('searchInput');
const results = document.getElementById('results');

const items = ['Apple', 'Banana', 'Orange', 'Grapes', 'Peach'];

searchInput.addEventListener('keyup', function(event) {
  const searchTerm = searchInput.value.toLowerCase();
  const filteredItems = items.filter(item => item.toLowerCase().includes(searchTerm));
  
  results.innerHTML = filteredItems.map(item => `<li>${item}</li>`).join('');
});