• Теория
  • Теория

Обработчик событий oninput

Мяу! Люди слишком много болтают, комментарии не должны быть длиннее самой новости!

А вот и новая задача от босса. Система комментирования, которую мы создали в предыдущей части, оказалась очень удобной, пользователи охотно обсуждают новости… и иногда увлекаются. Босс хочет, чтобы комментарии на сайте были не длиннее 142 символов. Верстальщик добавил в форму комментирования счётчик, чтобы пользователи видели, сколько символов они уже использовали. Если лимит символов превышен, то кнопка отправки комментария должна блокироваться, а счётчик символов и текст в поле ввода становиться красными.

Придётся доработать наш скрипт!

Мы уже умеем получать данные из поля ввода, но только после того, как форма была отправлена. Сейчас же нам нужно оценить длину комментария ещё до отправки. Как быть? Воспользуемся обработчиком событий oninput (в переводе с английского это означает «при вводе»). Инструкции внутри обработчика oninput выполняются каждый раз, когда значение в поле ввода меняется. Например:

// Найдём поле ввода
let textarea = document.querySelector('textarea');

// Добавим обработчик событий
textarea.oninput = function () {
  // Выведем данные из поля ввода
  console.log(textarea.value);
};

Наберём слово «Кекс», потом удалим последний символ и заглянем в консоль:

К (String)
Ке (String)
Кек (String)
Кекс (String)
Кек (String)

Обратите внимание, текст из поля ввода выводился в консоль при каждом изменении: и когда добавляли новый символ, и когда символ удаляли.

Благодаря обработчику событий oninput мы можем получить текст комментария ещё до того, как пользователь его отправит. Посмотрим, как это работает: добавим обработчик полю ввода комментария и введём какой-нибудь текст.

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. Только 5 дней цена 18 900 ₽22 900 ₽

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Коллекции и свойства элементов» тренажёра «Знакомство с JavaScript» можно после регистрации и оформления подписки.