Change event
The change event is fired for <input>, <select>, and <textarea> elements when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.
Depending on the kind of element being changed and the way the user interacts with the element, the change event fires at a different moment:
When a <input type="checkbox"> element is checked or unchecked (by clicking or using the keyboard);
When a <input type="radio"> element is checked (but not when unchecked);
When the user commits the change explicitly (e.g., by selecting a value from a <select>'s dropdown with a mouse click, by selecting a date from a date picker for <input type="date">, by selecting a file in the file picker for <input type="file">, etc.);
When the element loses focus after its value was changed: for elements where the user's interaction is typing rather than selection, such as a <textarea> or the text, search, url, tel, email, or password types of the <input> element.
The HTML specification lists the <input> types that should fire the change event.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 3 | 18 | 2 | |
Syntax
<select onchange="console.log(this.value)">
<option value="a">A</option>
<option value="b">B</option>
</select>
<script>
document.querySelector('select').addEventListener('change', e => {
console.log('変更:', e.target.value);
});
</script>Live demo
Change and input. Difference
Change is value. certain time, input is ki-input. to emitdifference.
Use cases
-
Using Change event
The change event is fired for <input>, <select>, and <textarea> elements when the user modifies the element's value.
Cautions
- May not be supported in older browsers.
Accessibility
- Verify how this element is announced by screen readers.