フォームイベント

##フォームイベントの種類

入力イベント

input イベントは、<input>、<select>、<textarea> の値が変更されるとトリガーされます。チェックボックス (<input type=checkbox>) またはラジオ ボタン (<input type=radio>) の場合、このイベントはユーザーがオプションを変更したときにもトリガーされます。さらに、contenteditable 属性がオンになっている要素の場合、値が変更される限り、input イベントもトリガーされます。

「input」イベントの特徴の 1 つは、ユーザーがボタンを押すたびに、継続的にトリガーされることです。

input イベント オブジェクトは InputEvent インターフェイスを継承します。

このイベントは change イベントと非常に似ていますが、input イベントは要素の値が変更された直後に発生するのに対し、change は要素がフォーカスを失ったときに発生し、その時点でコンテンツが複数回変更されている可能性がある点が異なります。時間。つまり、継続的な変更がある場合、「input」イベントは複数回トリガーされますが、「change」イベントはフォーカスが失われたときに 1 回だけトリガーされます。

以下は <select> 要素の例です。

/* HTMLコードは以下の通り
<select id="mySelect">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</選択>
*/

関数 inputHandler(e) {
  console.log(e.target.value)
}

var mySelect = document.querySelector('#mySelect');
mySelect.addEventListener('input', inputHandler);

上記のコードでは、ドロップダウン ボックスのオプションが変更されると、input イベントがトリガーされ、それによってコールバック関数 inputHandler が実行されます。

イベントを選択

select イベントは、<input> または <textarea> でテキストが選択されるとトリガーされます。

// HTMLコードは以下の通り
// <input id="test" type="text" value="選択してください!" />

var elem = document.getElementById('test');
elem.addEventListener('select', function (e) {
  console.log(e.type); // "選択"
}、 間違い）;

選択されたテキストは、event.target 要素の selectionDirection、selectionEnd、selectionStart、および value 属性を通じて取得できます。

変更イベント

change イベントは、<input>、<select>、<textarea> の値が変更されるとトリガーされます。 input イベントとの最大の違いは、継続的にトリガーされないことです。一方、input イベントは change イベントを伴う必要があります。 。具体的には以下のような状況に分けられます。

• ラジオまたはチェックボックスがアクティブ化されたときに発生します。
• ユーザーが送信すると発生します。たとえば、次のリストから選択 (選択) し、日付またはファイルの入力ボックスで選択を完了します。
• テキスト ボックスまたは <textarea> 要素の値が変更され、フォーカスが失われたときに発生します。

以下に例を示します。

// HTMLコードは以下の通り
// <select size="1" onchange="changeEventHandler(event);">
// <オプション>チョコレート</オプション>
// <オプション>イチゴ</オプション>
// <オプション>バニラ</オプション>
// </select>

関数changeEventHandler(イベント) {
  console.log(event.target.value);
}

上記の input イベントの例を比較すると、<select> 要素では、input イベントと change イベントが基本的に同等であることがわかります。

無効なイベント

ユーザーがフォームを送信するときに、フォーム要素の値が検証条件を満たさない場合、「invalid」イベントがトリガーされます。

<フォーム>
  <input type="text" oninvalid="console.log('invalid input')" /> が必要です
  <button type="submit">送信</button>
</form>

上記のコードでは、入力ボックスが必要です。入力されていない場合、ユーザーが送信ボタンをクリックすると、入力ボックスの「invalid」イベントがトリガーされ、送信がキャンセルされます。

イベントのリセット、イベントの送信

これら 2 つのイベントは、フォームのメンバーではなく、フォーム オブジェクト <form> で発生します。

「reset」イベントは、フォームがリセットされるとトリガーされます（すべてのフォームメンバーがデフォルト値に戻ります）。

「submit」イベントは、フォームデータがサーバーに送信されるとトリガーされます。ボタンではなくフォームが送信されるため、submit イベントは <button> 要素ではなく <form> 要素で発生することに注意してください。

入力イベントインターフェース

「InputEvent」インターフェースは主に「input」イベントのインスタンスを記述するために使用されます。このインターフェイスは「Event」インターフェイスを継承し、独自のインスタンス プロパティとインスタンス メソッドの一部も定義します。

ブラウザーは、インスタンス オブジェクトを生成するための InputEvent() コンストラクターをネイティブに提供します。

新しいInputEvent(タイプ、オプション)

InputEvent コンストラクターは 2 つのパラメーターを受け入れることができます。最初のパラメータはイベント名を表す文字列であり、必須です。 2 番目のパラメーターは、イベント インスタンスのプロパティを設定するために使用される構成オブジェクトです。このパラメーターはオプションです。 「Event」コンストラクターの構成プロパティに加えて、構成オブジェクトのフィールドでは次のフィールドも設定できます。これらのフィールドはすべてオプションです。

• inputType: 変更の種類を示す文字列 (詳細は以下を参照)。
• data: 挿入された文字列を表す文字列。挿入された文字列がない場合 (削除操作など)、null または空の文字列が返されます。
• dataTransfer: DataTransfer オブジェクト インスタンスを返します。このプロパティは通常、入力ボックスがリッチ テキスト入力を受け入れる場合にのみ有効です。

「InputEvent」のインスタンスプロパティは主に上記の3つです。これら3つのインスタンスプロパティはすべて読み取り専用です。

(1)InputEvent.data

InputEvent.data プロパティは、変更された内容を示す文字列を返します。

// HTMLコードは以下の通り
// <input type="text" id="myInput">
var input = document.getElementById('myInput');
input.addEventListener('input', myFunction, false);

関数 myFunction(e) {
  console.log(e.data);
}

上記のコードで、入力ボックスに「abc」を手動で入力すると、コンソールは最初に「a」を出力し、次に次の行に「b」を出力し、その次の行に「c」を出力します。次に「abc」を選択すると、それらをすべて一度に削除します。コンソールには「null」または空の文字列が出力されます。

(2)InputEvent.inputType

InputEvent.inputType プロパティは、文字列変更のタイプを示す文字列を返します。

一般的なケースでは、Chrome は次の値を返します。完全なリストについては、ドキュメント を参照してください。

• テキストを手動で挿入します: insertText
• 挿入されたテキストを貼り付けます: insertFromPaste
• 逆方向に削除: deleteContentBackward
• 転送の削除: deleteContentForward

(3)InputEvent.dataTransfer

InputEvent.dataTransfer プロパティは DataTransfer インスタンスを返します。このプロパティは、テキスト ボックスが貼り付けられたコンテンツ (insertFromPaste) またはドラッグされたコンテンツ (insertFromDrop) を受け入れる場合にのみ有効です。