188

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?

4
  • 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.
    – A. Wolff
    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.
    – dandavis
    Jun 11, 2013 at 15:10
  • 1
    The input event also captures pasting. See stackoverflow.com/questions/15727324/…
    – Antony
    Jun 11, 2013 at 15:51
  • 2
    TLDR: input fires as you type, change fire when you click outside Mar 5, 2018 at 17:09

5 Answers 5

180

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>

8
  • 11
    I'm still unclear on the difference between the two. They sound very similar from your descriptions. Jun 11, 2013 at 15:35
  • 15
    @JustinMorgan Like in the JSFiddle example, the onchange occurs "when the element loses the focus" while the oninput occurs on every text change. Jun 11, 2013 at 15:46
  • 6
    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. Jul 6, 2017 at 14:52
  • 1
    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 Oct 10, 2017 at 7:26
  • 1
    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.
    – zcoop98
    Aug 25, 2020 at 17:31
35
  • 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

8
  • I don't think the input event is guaranteed to fire synchronously.
    – Tim Down
    Jun 11, 2013 at 15:13
  • Also, current versions of all browsers support the input event.
    – Tim Down
    Jun 11, 2013 at 15:17
  • 2
    @TimDown, that's why I said browser support varies. Not everyone has the current version of every browser.
    – Gabe
    Jun 11, 2013 at 15:17
  • @TimDown Does it fire synchronously?
    – Suraj Jain
    Aug 31, 2017 at 10:21
  • @SurajJain: I'm not sure, to be honest.
    – Tim Down
    Sep 6, 2017 at 10:47
17

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>

2
  • 1
    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).
    – Timmmm
    Mar 10 at 11:11
  • 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.
    – Chrisuu
    Jun 28 at 0:37
10

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>

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

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.