JS об'єкт InputEvent

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

Подія input у JavaScript є подією для відстеження змін введення в текстових полях, таких як <input> або <textarea>. Вона спрацьовує щоразу, коли користувач змінює значення поля вводу, незалежно від того, чи ввів символ на клавіатурі, вставив текст, чи видалив символ. Це корисний інструмент для випадків, коли потрібне динамічне оновлення даних у реальному часі, наприклад, для показу підказок або автоматичної валідації введених даних.

Щоб почати використовувати input подію, потрібно додати слухача події на елемент за допомогою методу addEventListener. Приклад коду:

const inputField = document.querySelector('#textInput');
inputField.addEventListener('input', function(event) {
 console.log(event.target.value);
});

У цьому прикладі слухач події input реагує на зміни в полі #textInput і кожен раз виводить в консоль поточне значення текстового поля. Це дозволяє отримати значення безпосередньо після кожної зміни, що корисно для реактивного відображення, наприклад, для відображення пошукових підказок або візуалізації результату в режимі реального часу.

Сама подія input має різницю з подією change: input реагує на кожну зміну під час введення, тоді як change спрацьовує лише тоді, коли користувач завершує введення і залишає поле (натискає Enter або клікає за межі поля). Це робить input придатною для сценаріїв, де важливо моментально реагувати на кожну зміну, наприклад, для валідації або відображення відповідних результатів при введенні тексту.

Подія input також передає об'єкт event, який дозволяє отримати більше даних про подію. Основні властивості об'єкта event включають target, що вказує на елемент, з яким сталася подія, та target.value, яке містить поточне значення поля введення.

правити

Порада

Якщо вам не потрібно обробляти зміни в режимі реального часу, оберіть подію change замість input, оскільки change виконується лише після завершення введення, що може зменшити навантаження на браузер.

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

Порада

Для обмеження частоти виклику обробника input події при швидкому введенні, використовуйте debounce. Це обмежить кількість викликів і зробить додаток більш плавним. Наприклад, через lodash можна застосувати _.debounce(), або написати власну функцію.

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

Порада

Якщо необхідно обмежити введення певним форматом, наприклад, тільки цифри, додайте просту валідацію всередині обробника події input з умовою або регулярним виразом. Це допоможе негайно блокувати непотрібні символи і підвищить точність введення.

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

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

Синтаксис

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

методи

властивості

Переглядачі

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

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

Переглядач
	60	31	10.1	47	79	—

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

Переглядач
	60	60	31	10.3

Приклади

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

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

const inputField = document.querySelector('#searchInput');
const resultsContainer = document.querySelector('#results');

inputField.addEventListener('input', function(event) {
 const query = event.target.value.toLowerCase();
 const filteredResults = data.filter(item => item.includes(query));
 resultsContainer.innerHTML = filteredResults.join('<br>');
});

<input type="password" id="password" value="" placeholder="Введи щось">
<div id="strengthIndicator">Демонстраційний елемент</div>

const passwordField = document.querySelector('#password');
const strengthIndicator = document.querySelector('#strengthIndicator');

passwordField.addEventListener('input', function(event) {
 const strength = event.target.value.length;
 if (strength > 8) {
   strengthIndicator.textContent = 'Strong';
 } else if (strength > 4) {
   strengthIndicator.textContent = 'Medium';
 } else {
   strengthIndicator.textContent = 'Weak';
 }
});