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

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

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

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

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

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

У цьому прикладі подія input спрацьовує щоразу, коли користувач змінює текст у полі пошуку. Кожен введений символ виводиться в консоль, і цей функціонал можна розширити для відправлення запиту до сервера або для фільтрації результатів без перезавантаження сторінки.

Подія input передає об'єкт event, який містить багато корисної інформації, включаючи значення введеного тексту через властивість event.target.value. Ця подія працює з усіма сучасними браузерами і є універсальним способом відстежувати зміни користувацького введення в реальному часі.

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

inputField.addEventListener('input', function(event) {
  if (event.target.value.length < 3) {
    console.log('Занадто короткий запит');
  }
});

Подія input є дуже ефективною для покращення інтерфейсу користувача, оскільки дозволяє реалізувати функціонал "живого" зворотного зв'язку на сторінках з формами.

правити

Порада

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

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

Порада

Подія input не спрацьовує при зміні значення поля через JavaScript. Якщо потрібно, щоб зміни вручну викликали подію, використовуйте метод dispatchEvent, щоб ініціювати подію input після зміни значення через скрипт.

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

Порада

Для текстових полів, таких як textarea, подія input дозволяє відстежувати введення нових рядків, що може бути корисним для динамічної зміни висоти поля або для обмеження кількості введених символів в реальному часі.

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

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

Синтаксис

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

Переглядачі

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

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

Переглядач
	66	57	11.1	53	16

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

Переглядач
	66	66	57	11.3

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

Переглядач
	15.0.0	1.0

Приклади

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

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

const searchInput = document.getElementById('search-input');
const resultsContainer = document.getElementById('results');

searchInput.addEventListener('input', function() {
  const query = searchInput.value.trim();
  if (query.length > 2) {
    fetchResults(query);
  } else {
    resultsContainer.innerHTML = '';
  }
});

function fetchResults(query) {
  // Імітація отримання результатів пошуку
  const results = ['Результат 1', 'Результат 2', 'Результат 3'].filter(item => item.toLowerCase().includes(query.toLowerCase()));
  
  resultsContainer.innerHTML = results.map(result => `<p>${result}</p>`).join('');
}

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

const passwordInput = document.getElementById('password');
const validationMessage = document.getElementById('validation-message');

passwordInput.addEventListener('input', function() {
  const password = passwordInput.value;
  if (password.length < 6) {
    validationMessage.textContent = 'Пароль має містити щонайменше 6 символів';
  } else {
    validationMessage.textContent = '';
  }
});