Как получить значение из поля ввода в JavaScript и реагировать на ввод?
Сделал <input>, хочу при вводе сразу брать текст и что-то с ним делать. Достаю через textContent — пусто. И на какое событие подписываться, чтобы ловить каждое изменение в поле ввода?
2 ответа
Текст из поля ввода берётся через свойство value, а НЕ textContent (textContent — для обычных элементов вроде div/span).
const input = document.querySelector('#name');
console.log(input.value); // то, что набрал пользователь
Чтобы реагировать на каждый символ, подпишись на событие input:
const input = document.querySelector('#name');
input.addEventListener('input', (e) => {
console.log('Сейчас в поле:', e.target.value);
});
e.target.value — то же поле, удобно внутри обработчика.
Какое событие выбрать:
- input — срабатывает на каждое изменение (ввод, удаление, вставка). Бери для живого поиска, счётчика символов, валидации на лету.
- change — срабатывает, когда поле потеряло фокус и значение изменилось. Подходит для
select, чекбоксов, когда реакция нужна не на каждый символ. - keydown/keyup — на нажатие клавиш, когда важна конкретная клавиша (например, Enter):
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
console.log('Нажали Enter, значение:', input.value);
}
});
Частая ошибка: читать value один раз при загрузке страницы и удивляться, что оно не обновляется. Значение надо читать внутри обработчика, в момент события — тогда там актуальный ввод.
Маленькая, но важная разница на практике:
// div/span/p — текст через textContent
document.querySelector('#title').textContent;
// input/textarea/select — значение через value
document.querySelector('#field').value;
// чекбокс — через checked (true/false)
document.querySelector('#agree').checked;
Путаница value vs textContent — одна из самых частых у новичков с формами. Запомни: ввод пользователя живёт в value.