Languages
[Edit]
EN

JavaScript - oninput vs onchange

0 points
Created by:
DEX7RA
580

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>

Alternative titles

  1. JavaScript - input event vs change event
  2. JavaScript - oninput event vs onchange event
  3. JavaScript - oninput vs onchange comparison
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
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