Difference Between "Change" and "Input" Event for an 'Input' Element

Difference between change and input event for an `input` element

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 content
• onchange:
  
  • If it is an <input />: change + lose focus
  • If it is a <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>

What's the difference between @input and @change in Vue input type=file?

These events are inherited from the javascript events oninput and onchange and according to this you could see the difference :

The oninput event occurs when an element gets user input.
This event occurs when the value of an <input> or <textarea> element is changed.
Tip: This event is similar to the onchange event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed. The other difference is that the onchange event also works on <select> elements.

Example with simple input text :

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  methods: {
    input() {
      console.log("input")
    },
    change() {
      console.log("change")
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input @change="change" @input="input" />
</div>

Differences between input and keyPress events

So actually those two events are not the same at all. Let me break it down for you.

• keypress event triggers when any of your keyboard keys are pressed independently of the element you are focusing. If you press a key on a blank html page, the event will be triggered. This event is mostly used to trigger events like when there is a popup and you press escape, it hides it.
• input event is specific to the case where you are currently typing or pressing keys while focusing an input element. With it, you can actually get the input value and do stuff with it like in a form, check if the password has symbols, a caps letter, and numbers.

This is the difference between those two events. They don't have the same use at all.

Can javascript tell the difference between user input and dynamic update?

You can manually edit the .value of an input element, and as long as the element was not focussed by the user, an onChange event is not fired by most browsers.

In React, what's the difference between onChange and onInput?

It seems there is no real difference

React, for some reason, attaches listeners for Component.onChange to the DOM element.oninput event. See the note in the docs on forms:

React docs - Forms

There are more people that are surprised by this behavior. For more details, refer to this issue on the React issue tracker:

Document how React's onChange relates to onInput #3964

Quote from the comments on that issue:

I don't understand why React chose to make onChange behave like onInput does. As fas as I can tell, we have no way of getting the old onChange behaviour back. Docs claim it's a "misnomer" but not it isn't really, it does fire when there's a change, just not until the input also loses focus.

For validation, sometimes we don't want to show validation errors until they're done typing. Or maybe we just don't want a re-render on every keystroke. Now the only way to do that is with onBlur but now we also need to check that the value has changed manually.

It's not that big of a deal, but it seems to me like React threw away a useful event and deviated from standard behaviour when there was already an event that does this.

I agree 100% with the comment... But I guess changing it now would bring more problems than it solves since so much code had already been written that relies on this behavior.

React is not part of the official Web API collection

Even though React is built on top of JS, and has seen a huge adoption rate, as a technology React exists to hide a whole lot of functionality under its own (fairly small) API. Once area where this is obvious is in the event system, where there's a lot going on under the surface that's actually radically different from the standard DOM event system. Not just in terms of which events do what, but also in terms of when data is allowed to persist at what stage of the event handling. You can read more about that here:

React Event System

paper-input change vs value-changed

change occurs when paper-input loses focus and if there is any
changes in the value.

value-changed occurs when user presses a key in paper-input to change the value.

Demo here.

---

Related Topics