Событие input в JavaScript

Событие input в JavaScript является одним из основных событий для обработки ввода данных пользователем в элементы форм, такие как <input>, <textarea> и <select>. Оно срабатывает каждый раз, когда значение элемента изменяется, что делает его незаменимым для создания динамичных и интерактивных веб-приложений. В этой статье мы рассмотрим, как работает событие input, его особенности и как его можно использовать для реализации различных функциональностей.

Как работает событие "input"?

Событие input активируется при изменении значения элемента управления формой. В отличие от события change, которое срабатывает только после того как элемент теряет фокус, input реагирует на каждое изменение, будь то ввод текста, вставка содержимого из буфера обмена или даже программные изменения значения.

Примеры использования события "input"

Реализация мгновенного поиска

Рассмотрим пример, где событие input используется для реализации механизма мгновенного поиска, который фильтрует список элементов по мере ввода текста пользователем.

// Элемент input для ввода текста поиска
const searchInput = document.getElementById('searchInput');

// Элемент списка, который будет фильтроваться
const list = document.getElementById('myList');
const items = list.querySelectorAll('li');

// Функция для фильтрации списка
searchInput.addEventListener('input', function(event) {
    const searchText = event.target.value.toLowerCase();

    items.forEach(item => {
        const text = item.textContent.toLowerCase();
        if (text.includes(searchText)) {
            item.style.display = '';
        } else {
            item.style.display = 'none';
        }
    });
});

В этом примере каждый ввод в поле поиска немедленно обновляет видимость элементов списка, скрывая те, которые не соответствуют критериям поиска.

Валидация ввода в реальном времени

Событие input также можно использовать для валидации введенных данных на лету, позволяя предоставлять обратную связь пользователю до того, как форма будет отправлена.

const emailInput = document.getElementById('emailInput');
const feedback = document.getElementById('feedback');

emailInput.addEventListener('input', function() {
    const email = emailInput.value;
    const valid = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email);

    if (valid) {
        feedback.textContent = 'Email валидный!';
        feedback.style.color = 'green';
    } else {
        feedback.textContent = 'Некорректный Email.';
        feedback.style.color = 'red';
    }
});

В данном случае пользователь получает немедленную обратную связь о корректности введенного email адреса.

Заключение

Событие input предоставляет разработчикам мощный инструмент для обработки ввода данных в реальном времени, позволяя реализовать множество функциональностей, от мгновенной валидации до динамичного поиска. Благодаря его универсальности и простоте в использовании, input стал одним из ключевых инструментов в арсенале современного веб-разработчика, делая интерфейсы более дружелюбными и интерактивными.