1. ホーム
  2. javascript

[解決済み] 入力`要素の "変更 "イベントと "入力 "イベントの違いについて

2022-04-27 22:10:38

質問

との違いを教えてください。 changeinput のイベントは?

jQueryを使って追加しています。

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

また input の代わりに change .

フォーカスに対するイベントの順序に何らかの違いがあるのでは?

解決方法は?

によると この記事 :

  • oninput イベントは、ユーザーインターフェイスを通じて要素のテキスト内容が変更されたときに発生します。

  • onchange は、選択状態、チェック状態、または要素のコンテンツがある場合に発生します。 変更された . 場合によっては、その要素がフォーカスを失ったときや、あるいは 戻る (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>