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

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

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

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

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

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

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

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

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