JS об'єкт Input
Загальний опис
Подія 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, яке містить поточне значення поля введення.
| Порада: | Якщо вам не потрібно обробляти зміни в режимі реального часу, оберіть подію |
| Порада: | Для обмеження частоти виклику обробника |
| Порада: | Якщо необхідно обмежити введення певним форматом, наприклад, тільки цифри, додайте просту валідацію всередині обробника події |
Синтаксис
element.addEventListener('input', function(event) {
// Ваш код
});Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
60 |
31 |
10.1 |
47 |
79 |
| Переглядач | ||||
|---|---|---|---|---|
60 |
60 |
31 |
10.3 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад надає користувачеві зворотний зв'язок під час введення паролю. Паролі, що містять великі літери, цифри та більше восьми символів, вважаються "сильними", від чотирьох до восьми — "середніми", а коротші — "слабкими". Інтерактивний індикатор змінює текст та колір, залежно від надійності паролю.
У цьому прикладі input подія використовується для створення пошукової системи в реальному часі. Коли користувач вводить запит у поле пошуку, код динамічно фільтрує список даних і показує результати, які відповідають запиту. Це ідеально підходить для систем, де потрібен миттєвий пошук за кількома параметрами.
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 подія використовується для динамічної оцінки надійності паролю під час його введення. Обробник визначає довжину введеного паролю і оновлює текст індикатора на Weak, Medium або Strong у залежності від поточної кількості символів. Це дає користувачеві миттєвий зворотній зв’язок щодо безпеки паролю.
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';
}
});Методи
getTargetRanges()- Повертає масив діапазонів (`Range`), які представляють виділений текст або область, пов'язану з подією вводу в документі. Використовується головним чином з подіями редагування для визначення текстових діапазонів, на які впливають зміни.
Властивості
isComposing- Визначає, чи перебуває користувач у процесі введення складного тексту, наприклад, за допомогою редактора для складання символів (IME) для мов, що потребують складного вводу (як-от японська або китайська). Значення `true` означає, що введення ще не завершене.
inputType- Вказує на тип виконаної дії під час події введення, наприклад, `insertText`, `deleteContentBackward` або `insertLineBreak`. Це дозволяє точно визначати, яка саме зміна була внесена до текстового вмісту.
dataTransfer- Містить об'єкт `DataTransfer`, пов’язаний із подією, який надає доступ до даних, що перетягуються під час дій копіювання, вирізання або вставки. Це використовується для обробки перетягування файлів або тексту в область введення.
data- Містить текстові дані, які були додані до поля вводу під час події `input`, наприклад, символ або рядок, вставлений користувачем. Значення може бути `null`, якщо подія не передає текстових даних.