css.in.ua
Підтримати

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, тому важливо перевіряти весь текст цілком.
Порада:

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

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

Синтаксис

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

Значення

Return

Переглядачі

Переглядач

66

57

11.1

53

16
Переглядач

66

66

57

11.3
Переглядач

15.0.0

1.0

Приклади


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

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

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 для динамічної валідації пароля. Кожен раз, коли користувач вводить або змінює пароль, перевіряється його довжина і миттєво виводиться повідомлення, якщо пароль занадто короткий.

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 = '';
  }
});

Спільнота

Зв'язок