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). Крім того, вона дозволяє більш точно контролювати введення символів, оскільки спрацьовує після натискання, коли символ вже введений.
| Порада: | Для обробки комбінацій клавіш, таких як |
| Порада: | Подія |
| Порада: | Звертайте увагу на відмінності між |
Синтаксис
element.addEventListener('keyup', function(event) {
// Ваш код тут
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі подія keyup використовується для контролю введення символів у текстове поле. Коли користувач вводить текст, в реальному часі відображається кількість введених символів, а якщо досягнуто ліміту (100 символів), вводиться попередження, і додаткові символи більше не можна ввести.
Цей приклад демонструє, як подія keyup використовується для фільтрації введених даних. Вона дозволяє користувачу вводити тільки літери, видаляючи всі інші символи (цифри, знаки) після їхнього введення.
const inputField = document.getElementById('lettersOnly');
inputField.addEventListener('keyup', function(event) {
const value = inputField.value;
// Очищаємо поле від всіх символів, крім літер
inputField.value = value.replace(/[^a-zA-Z]/g, '');
});У цьому прикладі використовується подія keyup для реалізації функції пошуку в реальному часі. Коли користувач вводить символи в полі пошуку, список результатів оновлюється автоматично, фільтруючи елементи відповідно до введеного тексту.
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('');
});