Form Events

After this lesson you can

• Choose the form event that fires at the moment you need it, from change, input, keydown, keyup, focus, blur and submit

Key takeaways

• input fires with every change to a text box's value, as it happens. change fires on a text box when the visitor leaves it (or presses Enter) after changing it.
• For a checkbox or radio button, change fires as soon as it's checked or unchecked.
• keydown fires when a key is pressed, again and again while it's held, and keyup when it's let go.
• focus fires when a control is entered, and blur when it's left.
• submit fires on the form when it's sent, by its submit button or by pressing Enter in a text box.

Think of a sign-up form that counts the characters as you type, warns you the moment you leave the email box empty, and only sends once everything is filled in. Each of those reactions hangs on a different moment, and form controls, such as text boxes, checkboxes, dropdowns and the form itself, send an event for each one: when a visitor types, changes a value, moves from one field to the next, or sends the form.

change

The change event fires when the value of an input has changed. On a text box, change doesn't fire while the visitor types: it waits until they leave the box (or press Enter) after changing it.

For a checkbox or radio button the change event fires immediately when the checked state changes. A dropdown (a <select>) fires change as soon as a new option is chosen.

input

The input event fires every time the value of a text box changes, as it happens: each letter typed, deleted or pasted. When a key is typed, keydown fires first, then input as the letter lands in the box, then keyup as the key is let go. Use input when the page should keep up with the typing, such as a character count under a <textarea> (a text box with room for several lines):

<textarea id="review"></textarea>
<p id="count">0 characters</p>

const review = document.getElementById("review");
const count = document.getElementById("count");

review.addEventListener("input", () => {
    count.textContent = review.value.length + " characters";
});

keyup

The keyup event fires after the keyboard key is released.

keydown

The keydown event fires immediately when a keyboard key is pressed. If a key is held down this event fires repeatedly, the way a held key keeps typing the same letter.

keydown and keyup aren't only for forms: they fire on whatever has focus, and bubble up to the document. That's why a keyboard shortcut for the whole page, such as Escape to close a menu, listens on document.

focus

The focus event fires when a form control receives focus: the visitor clicks into it or reaches it with Tab, and it's now the one the keyboard types into. It's the moment to show a tip, such as At least 8 characters.

blur

blur is the opposite of focus: it fires when the visitor leaves the control, by pressing Tab or by clicking somewhere else. (The name comes from a camera: the control goes out of focus.) It's the moment to check what they typed, such as an email box left empty.

submit

A form's submit event fires on the form when it is sent: when its submit button is pressed, or when the visitor presses Enter in one of its text boxes. Listen for submit on the form rather than click on the button, so both ways are caught.

Check yourself

2 questions to try on the lesson page.

So what

Picking the right event is half the work: the same code feels instant on input, calm on change, and complete on submit.

Key terms

• change Event
• submit Event