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>