213

Can someone tell me what the difference between the change and input events is?

I am using jQuery for adding them:

$('input[type="text"]').on('change', function() {
    alert($(this).val());
})

It also works with input instead of change.

Maybe some difference in the event ordering relative to focus?

Improve this question
5
  • rakshasingh.weebly.com/1/post/2012/12/… Note that oninput is not supported in older browser. You could use then: onchange, onpaste and onkeyup as a workaround. PS: oninput event is also buggy in IE9 and it is not fired on deletion. Commented Jun 11, 2013 at 15:09
  • 2
    input fires more often, like after a keypress, whereas change basically fires when the input is blurred and the value is not what it was when the input was focused. Commented Jun 11, 2013 at 15:10
  • 1
    The input event also captures pasting. See stackoverflow.com/questions/15727324/… Commented Jun 11, 2013 at 15:51
  • 2
    TLDR: input fires as you type, change fire when you click outside Commented Mar 5, 2018 at 17:09
  • @dandavis there seems to be no significant differences for select elements? Commented Aug 11, 2024 at 5:48

5 Answers 5

Reset to default
201

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

I'm still unclear on the difference between the two. They sound very similar from your descriptions.
@JustinMorgan Like in the JSFiddle example, the onchange occurs "when the element loses the focus" while the oninput occurs on every text change.
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.
In other words "input" is triggered immediately when any character is changed, deleted or added while "change" is evaluated after the control loses focus and happens only when the value has changed
This explanation is very poor, and verges on being outright wrong. change events fire specifically when the input value is changed by the user. input fires on all value changes, regardless of where they come from.
|
39

  • The change event fires in most browsers when content is changed and the element loses focus. It's basically an aggregate of changes. It will not fire for every single change as in the case input event.

  • The input event fires synchronously on change of the content for the element. As such, the event listener tends to fire more frequently.

  • Different browsers do not always agree whether a change event should be fired for certain types of interaction

Improve this answer

9 Comments

I don't think the input event is guaranteed to fire synchronously.
Also, current versions of all browsers support the input event.
@TimDown, that's why I said browser support varies. Not everyone has the current version of every browser.
@TimDown Does it fire synchronously?
@SurajJain: I'm not sure, to be honest.
|
29

It seems that this question has become one of the those questions that I visit from time to time. I'm not a fan of reading walls of text for simple things. So I decided to post a practical answer.

Using the following demo, one can examine which events are fired and in what order.

screenshot of the demo

let eventsToListen = [
    "focus",
    "blur",
    "input",
    "change",
];
let inputs = Array.from(
    document.querySelectorAll("#inputs :is(input, textarea, select)")
);
inputs.forEach(input => {
    input.eventQueue = [];
    let queueLimit = eventsToListen.length * 2;
    let queueDisplay = input.closest("td").nextElementSibling;
    eventsToListen.forEach(event => {
        input.addEventListener(event, () => {
            input.eventQueue.push(event);
            if (input.eventQueue.length > queueLimit) {
                Array(input.eventQueue.length - queueLimit).fill(null).forEach(
                    _ => input.eventQueue.shift()
                );
            }
            queueDisplay.textContent = input.eventQueue.join(", ");
        });
    });
});
* {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
}
body {
    font-family: sans-serif;
    box-sizing: border-box;
    background-color: hsl(0, 0%, 90%);
}
#inputs {
    margin: 1em;
}
#inputs td {
    padding: 0.1em;
}
#inputs td:nth-child(2) :not(input[type=radio]):not(input[type=checkbox]) {
    width: 100%;
}
#inputs label {
    display: table;
}
#inputs td:last-child {
    font-style: italic;
    font-size: 0.8em;
    opacity: 0.7;
    padding-left: 1em;
}
#notices {
    margin: 1em;
}
#notices ul {
    padding-left: 2em;
    line-height: 2;
}
#notices > ul {
    margin-top: 0.5em;
}
input[type=radio]:focus,
input[type=checkbox]:focus {
    transform: scale(1.5);
}
<table id="inputs">
    <tr>
        <td>text</td>
        <td><input type="text" /></td>
        <td></td>
    </tr>
    <tr>
        <td>number</td>
        <td><input type="number" /></td>
        <td></td>
    </tr>
    <tr>
        <td>textarea</td>
        <td><textarea></textarea></td>
        <td></td>
    </tr>
    <tr>
        <td>select</td>
        <td>
            <select>
                <option>-</option>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2">radio</td>
        <td>
            <label><input type="radio" name="something" /> Option 1</label>
        </td>
        <td></td>
    </tr>
    <tr>
        <td>
            <label><input type="radio" name="something" /> Option 2</label>
        </td>
        <td></td>
    </tr>
    <tr>
        <td style="padding-right: 0.5em">checkbox</td>
        <td>
            <label><input type="checkbox" name="something2" /> Option 1</label>
        </td>
        <td></td>
    </tr>
</table>

<hr>

<div id="notices">
    notice that:
    <ul>
        <li>"input" event can occur multiple times before a "change" event occurs on text/number/textarea</li>
        <li>"input" and "change" event seem to occur together/sequentially on select</li>
        <li>"input"/"change" event might occur multiple times before a "blur" event occurs on select
            <ul>
                <li>when arrow keys are used to select an option</li>
            </ul>
        </li>
    </ul>
</div>

Improve this answer

2 Comments

This is awesome. TL;DR: input works for all if them if you care about immediate notification. change works for all of them if you care about notification on defocus (blur).
Excellent demo/answer. It shows the 5 most recent events on the right of each input field, with the most recent being on the far right.
20

TL;DR: The biggest difference is what causes the value change:

  • input events fire on any value changes
  • change events fire on direct user-initiated value changes
    • (The exact details of this vary between input types)

The most significant difference between these two events is what causes the value change on the <input>.

According to MDN:

The input event fires when the value of an <input>, <select>, or <textarea> element has been changed.

In other words, input fires any time the value changes.

change is a little bit more complicated:

The change event is fired for <input>, <select>, and <textarea> elements when an alteration to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.

In other words, change fires when the user changes the value. In addition, change only generally fires when the ending value is different than the starting one (as its name suggests).

For <input> specifically, the exact timing of the change event depends on the input's type attribute. In general:

  • For text-based input types (e.g: search, text, email, password, etc.):
    • When the element loses focus (on blur).
  • For inputs that open some sort of interactive menu (e.g. file, date, color, etc.):
    • When the UI element is closed.
    • If the type has a direct text input mechanism (like date), then it also fires on each input of text (e.g. on each typed digit).
  • For non-textual inputs that are interactive (e.g. checkbox, radio, & range):
    • When the element is left in a new state after interacting with it (e.g. click, drag, keyboard shortcut trigger).

There are a few elements with their own nuances, but these are true in the general case.

Interactive Demo

new Vue({
  el: '#app',
  data: {
    inputs: [],
    changes: [],
    types: ['text', 'email', 'color', 'file', 'date', 'range'],
  },
  methods: {
    logEvent(e, index) {
      this.$set(this[e.type + 's'], index, e.target.value);
    },
  },
});
<link href="https://unpkg.com/bootstrap@4/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://unpkg.com/vue@2/dist/vue.min.js"></script>

<div id="app">
  <div class="container mw-100 py-3">
    <div v-for="(type, i) in types" class="row mb-2">
      <div class="col-2">
        <span>{{ type.charAt(0).toUpperCase() + type.slice(1) }}:</span>
      </div>
      <div class="col-5">
        <input :type="type" @input="logEvent($event, i)" @change="logEvent($event, i)" />
      </div>
      <div class="col-5">
        <div class="row">
          <div class="col-6 text-break">
            <span>Input: <span style="color: red">{{ inputs[i] }}</span></span>
          </div>
          <div class="col-6 text-break">
            <span>Change: <span style="color: blue">{{ changes[i] }}</span></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Improve this answer

Comments

3

MDN documentation has a clear explanation (not sure when it was added):

The change event is fired for input, select, and textarea elements when an alteration to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.