Can someone tell me what the difference between the change
and input
events is?
I am using jQuery for adding them:
$('input[type="text"]').on('change', function() {
alert($(this).val());
})
It also works with input
instead of change
.
Maybe some difference in the event ordering relative to focus?
According to this post:
oninput
event occurs when the text content of an element is changed through the user interface.
onchange
occurs when the selection, the checked state or the contents of an element have changed. In some cases, it only occurs when the element loses the focus or when pressing return (Enter) and the value has been changed. The onchange attribute can be used with: <input>
, <select>
, and <textarea>
.
TL;DR:
oninput
: any change made in the text contentonchange
:
<input />
: change + lose focus<select>
: change option$("input, select").on("input", function () {
$("pre").prepend("\nOn input. | " + this.tagName + " | " + this.value);
}).on("change", function () {
$("pre").prepend("\nOn change | " + this.tagName + " | " + this.value);
}).on("focus", function () {
$("pre").prepend("\nOn focus | " + this.tagName + " | " + this.value);
}).on("blur", function () {
$("pre").prepend("\nOn blur | " + this.tagName + " | " + this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<select>
<option>Alice</option>
<option>Bob</option>
<option>Carol</option>
<option>Dave</option>
<option>Emma</option>
</select>
<pre></pre>