What is the oninput event in HTML5 and how is it different from onchange?

Oninput triggers an instant change when the user inputs, and onchange triggers when the element loses focus and the value has changed. 1. Oninput is executed immediately every time you type, delete, paste or drag; 2. Onchange is triggered only when the focus is lost and the value is different from the focus is obtained; 3. Oninput is suitable for real-time search, character counting and other scenarios, onchange is suitable for submitting final values such as form confirmation; 4. Oninput supports modern browsers and provides real-time feedback, onchange is more compatible but triggered late; 5. Manually modifying value through JavaScript will not trigger oninput unless an event is explicitly distributed. Therefore, oninput is required when responding in real time, and onchange is required when confirming the final value.

The oninput event in HTML5 fires whenever the value of an input element changes as the user is typing — meaning it triggers immediately with every keystroke, paste, drag-and-drop, or deletion that alters the input field's value.

In contrast, the onchange event only fires when the element loses focus (ie, on blur), but only if the value has actually changed since gaining focus.

Key Differences

1. Timing of Execution

• oninput : Fires immediately as the user types, deletes, or modify the input.
• onchange : Fires after the field loses focus , and only if the value is different from when it was focused.

For example:

 <input type="text" oninput="console.log(&#39;Input changed&#39;)" onchange="console.log(&#39;Value committed&#39;)">

• As you type, oninput logs every keystroke.
• onchange only logs when you click away (blur) and the final value difference from the initial one.

2. Use Cases

• Use oninput when you want real-time feedback , like:
  • Live search filtering
  • Character counters
  • Form validation as you type
• Use onchange when you care about committed changes , such as:
  • Dropdown selections
  • Final form values after user finishes editing
  • Avoiding excessive processing during typing

3. Browser Behavior & Support

• oninput is supported in all modern browsers and is part of HTML5.
• onchange has been around longer and works consistently across older browsers too.
• Note: oninput does not fire for non-editing changes (like setting .value via JavaScript unless you dispatch the event manually).

4. Event Trigger Examples

Here's how they behave differently:

 <input type="text" id="demo" oninput="console.log(&#39;Input:&#39;, this.value)" onchange="console.log(&#39;Change:&#39;, this.value)">

• Type "hello": oninput fires 5 times (one per letter).
• Then tab away: onchange fires once if the value is now different.
• Edit and then revert to original value before leaving: onchange won't fire because the value didn't change.

In short:
oninput = during user interaction, immediately updates.
onchange = after interaction, final committed value.

Choose based on whether you need live updates or finalized changes.
Basically, use oninput for responsiveness, onchange for confirmation.

The above is the detailed content of What is the oninput event in HTML5 and how is it different from onchange?. For more information, please follow other related articles on the PHP Chinese website!