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 є дуже ефективною для покращення інтерфейсу користувача, оскільки дозволяє реалізувати функціонал "живого" зворотного зв'язку на сторінках з формами.
| Порада: | Якщо ви використовуєте подію |
| Порада: | Подія |
| Порада: | Для текстових полів, таких як |
Синтаксис
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 = '';
}
});