Languages

JavaScript - oninput vs onchange

0 points
Asked by:
Saim-Mccullough
388

What is the difference between oninput and onchange events in JavaScript?

1 answer
0 points
Answered by:
Saim-Mccullough
388

Input event

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 - 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

Notice that oninput event triggers when you input the text and onchange event triggers when the input loses the focus.

// 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:</span>
  <input type="text" id="input1" oninput="myFunction(this)">
  <h2>onchange</h2>
  <span>Type something:</span>
  <input type="text" id="input2" onchange="myFunction(this)">
</body>
</html>
0 comments Add comment
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join