HTMLElement: beforeinput イベント
DOM の beforeinput
イベントは、<input>
または <textarea>
要素の値が変更されようとしているときに発生します。 このイベントは、contenteditable
が有効になっている要素、および designMode
がオンになっている要素にも適用されます。
これにより、ブラウザーが DOM ツリーを変更する前に、ウェブアプリがテキスト編集の動作を上書きすることができ、入力イベントをより詳細に制御してパフォーマンスを向上させることができます。
contenteditable
や designMode
の場合、イベントのターゲットは編集ホストです。これらのプロパティが複数の要素に適用された場合、編集ホストは、親が編集可能ではない直近の先祖要素になります。
構文
このイベント名を addEventListener()
などのメソッドで使うか、イベントハンドラープロパティを代入するかします。
addEventListener("beforeinput", (event) => {});
onbeforeinput = (event) => {};
イベント型
InputEvent
です。Event
から継承しています。
イベントプロパティ
このインターフェイスには、親である UIEvent
および Event
から継承したプロパティがあります。
InputEvent.data
読取専用-
挿入された文字を文字列で返します。変更によって挿入されたテキストがない場合は、空文字列になることがあります(文字を削除した場合など)。
InputEvent.dataTransfer
読取専用-
編集可能なコンテンツに追加または削除されるリッチテキストまたはプレーンテキストデータに関する情報が入った
DataTransfer
オブジェクトを返します。 InputEvent.inputType
読取専用-
編集可能なコンテンツの変更の種類、例えばテキストの挿入、削除、整形などを返します。入力型の完全なリストについては、プロパティページを参照してください。
InputEvent.isComposing
読取専用-
論理値で、このイベントが
compositionstart
の後、compositionend
の前に発生したかどうかを示します。
例
機能の検出
以下の関数は、 beforeinput
および getTargetRanges
に対応していれば true を返します。
function isBeforeInputEventAvailable() {
return (
window.InputEvent &&
typeof InputEvent.prototype.getTargetRanges === "function"
);
}
単純なロガー
この例では、 <input>
要素に適用された新しい値に置き換える直前に、要素の現在の値をログに記録します。
HTML
<input placeholder="テキストを入力" name="name" />
<p id="values"></p>
JavaScript
const input = document.querySelector("input");
const log = document.getElementById("values");
input.addEventListener("beforeinput", updateValue);
function updateValue(e) {
log.textContent = e.target.value;
}
結果
仕様書
Specification |
---|
UI Events # event-type-beforeinput |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 関連イベント:
input