Різниця між подією "зміни" та "введення" для елемента "введення"

109

Може хтось скаже мені, в чому різниця між changeтаinput подіями подіями?

Я використовую jQuery для їх додавання:

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

Він також працює з inputзамістьchange .

Можливо, якась різниця в упорядкуванні подій відносно фокусування?

— Габріель Петрова
джерело

rakshasingh.weebly.com/1/post/2012/12/… Зауважте, що вхідний файл не підтримується у старішому веб-переглядачі. Тоді ви можете використовувати: onchange, onpaste та onkeyup як вирішення. PS: подія oninput також баггі в IE9, і вона не запускається при видаленні.

— А. Вольф

введення спрацьовує частіше, як після натискання клавіші, тоді як зміни в основному змінюються, коли вхід розмито, а значення не таке, як було, коли вхід був зосереджений.

— dandavis

inputПодія також захоплює наклеювати. Дивіться stackoverflow.com/questions/15727324/…

— Антоній

TLDR: вводиться пожежа під час введення, міняйте вогонь, клацаючи зовні

— Мухаммед Умер

Відповіді:

117

Відповідно до цього допису :

oninput подія відбувається, коли зміст тексту елемента змінюється через користувальницький інтерфейс.
onchangeвиникає, коли вибір, перевірений стан або вміст елемента змінилися . У деяких випадках це відбувається лише тоді, коли елемент втрачає фокус або при натисканні return(Enter) і значення було змінено. OnChange атрибут може використовуватися з: <input>, <select>і <textarea>.

TL; DR:

oninput: будь-які зміни, внесені в текстовий вміст
onchange:
- Якщо це ан <input /> : змінити + втратити фокус
- Якщо це <select>: змінити варіант

$("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>

Розгорніть фрагмент

— Іоніка Бізеу
джерело

Мені досі незрозуміло різниця між ними. Вони звучать дуже схоже з ваших описів.

— Джастін Морган

@JustinMorgan Як і в прикладі JSFiddle, onchangeвідбувається "коли елемент втрачає фокус", а oninputвідбувається при кожній зміні тексту.

— Ionică Bizău

Різниця полягає в тому, що подія oninput відбувається одразу після зміни значення елемента, тоді як onchange відбувається, коли елемент втрачає фокус, після змісту змісту.

— NinoLopezWeb

Іншими словами, "введення" спрацьовує негайно, коли будь-який символ змінюється, видаляється або додається, тоді як "зміна" оцінюється після того, як контроль втрачає фокус і відбувається лише тоді, коли значення змінилося

— Адам Мошчинський

Я просто спробував із Chrome. onchangeтакож спрацьовує, коли ви натискаєте клавішу Enter, поки фокусуєтесь.

— Рік

У change eventпожежах в більшості браузерів , коли зміст змінюються , а елемент втрачає focus. Це в основному сукупність змін. Він не запускатиметься за кожну зміну, як у випадку input event.
У input eventпожежах синхронно на зміну змісту для елемента. Слухач події, як правило, частіше стріляє.
Різні браузери не завжди погоджуються, чи слід запускати подію змін для певних типів взаємодії

— Гейб
джерело

Я не думаю, що подія введення гарантовано спрацює синхронно.

— Tim Down

Також поточна версія всіх браузерів підтримує inputподію.

— Тім Даун

@TimDown, тому я сказав, що підтримка браузера різниться. Не у всіх є поточна версія кожного браузера.

— Гейб

@TimDown Чи спрацьовує синхронно?

— Сурай Джайн

@SurajJain: Я не впевнений, якщо чесно.

— Тім Даун

Документація MDN має чітке пояснення (не впевнений, коли він був доданий):

Подія зміни обпалюють для input, selectі textareaелементи , коли зміна до значення елемента відбувається користувачем. На відміну від події введення, подія зміни не обов'язково запускається для кожної зміни значення елемента .

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

— Джоель Н
джерело