Interactive online courses HTML Academy
2026-03-09 10:48 Diff
https://htmlacademy.org/courses/javascript-basics/element-collections-properties/oninput-event-handler

Meow! People talk too much, and the comment section should not be longer than the news story itself!

This is our new assignment from the boss. The commenting system that we created in the previous chapter turned out to be quite convenient for users. Perhaps too convenient. They now eagerly discuss new stories… and sometimes they get a little carried away. The boss wants the comments on the site to be no longer than 142 characters. The web designer added a counter to the comment form so that users could see how many characters they had already used. If the character limit is exceeded, then the comment “Submit” button should be locked, and the character counter and text in the input field will turn red.

We need to finish our script!

We already know how to get data from the input field, but only after the form has been submitted. Now we need to determine how the comment length can be measured before the form is sent. How can we accomplish that? We will use the oninput event handler. Instructions inside the oninput handler are executed every time the value in the input field changes. For example:

// Find the input field let textarea = document.querySelector('textarea'); // Add the event handler textarea.oninput = function () { // Display data from the input field console.log(textarea.value); };

Type the word “Muffin”, then remove the last character and take a look at the console:

M (String)

Mu (String)

Muf (String)

Muff (String)

Muf (String)

Notice how the text from the input field was displayed in the console with each change, including both when new characters were added and deleted.

Thanks to the oninput event handler, we can get the comment text before the user submits it. Let’s see how it works: add a handler to the comment input field and enter some text.