EN
JavaScript - oninput vs onchange
0
points
In this article, we would like to show you oninput
vs onchange
events comparison in JavaScript.
Input event (oninput
)
oninput
- executes JavaScript code when the value of the HTML element is changed. This can be done by e.g typing something manually in textarea
or by pasting some text to the input.
Change event (onchange
)
onchange
- executes JavaScript code when the state or the contents of an element have changed. This can be done by e.g checking/unchecking radio input (or checkbox), losing focus of the textarea
, etc.
Comparison
In this section, we present oninput
and onchange
events comparison, check the runnable example below to see the differences.
Notice that oninput
event triggers when you input the text and onchange
event triggers when the input
loses the focus.
Runnable example:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<script>
function myFunction(input) {
console.clear();
console.log(`Current ${input.id} value: ` + input.value);
}
</script>
</head>
<body>
<h2>oninput</h2>
<span>Type something or paste text to trigger oninput event:</span>
<input type="text" id="input1" oninput="myFunction(this)">
<h2>onchange</h2>
<span>Type something and lose focus to trigger onchange event:</span>
<input type="text" id="input2" onchange="myFunction(this)">
</body>
</html>