HTMLElement: beforeinput イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

DOM の beforeinput イベントは、<input> または <textarea> 要素の値が変更されようとしているときに発生します。 このイベントは、contenteditable が有効になっている要素、および designMode がオンになっている要素にも適用されます。

これにより、ブラウザーが DOM ツリーを変更する前に、ウェブアプリがテキスト編集の動作を上書きすることができ、入力イベントをより詳細に制御してパフォーマンスを向上させることができます。

contenteditable や designMode の場合、イベントのターゲットは編集ホストです。これらのプロパティが複数の要素に適用された場合、編集ホストは、親が編集可能ではない直近の先祖要素になります。

構文

このイベント名を addEventListener() などのメソッドで使うか、イベントハンドラープロパティを代入するかします。

js
addEventListener("beforeinput", (event) => {});

onbeforeinput = (event) => {};

イベント型

InputEvent です。Event から継承しています。

Event UIEvent InputEvent

イベントプロパティ

このインターフェイスには、親である UIEvent および Event から継承したプロパティがあります。

InputEvent.data 読取専用

挿入された文字を文字列で返します。変更によって挿入されたテキストがない場合は、空文字列になることがあります（文字を削除した場合など）。

InputEvent.dataTransfer 読取専用

編集可能なコンテンツに追加または削除されるリッチテキストまたはプレーンテキストデータに関する情報が入った DataTransfer オブジェクトを返します。

InputEvent.inputType 読取専用

編集可能なコンテンツの変更の種類、例えばテキストの挿入、削除、整形などを返します。入力型の完全なリストについては、プロパティページを参照してください。

InputEvent.isComposing 読取専用

論理値で、このイベントが compositionstart の後、compositionend の前に発生したかどうかを示します。

例

機能の検出

以下の関数は、 beforeinput および getTargetRanges に対応していれば true を返します。

js
function isBeforeInputEventAvailable() {
  return (
    window.InputEvent &&
    typeof InputEvent.prototype.getTargetRanges === "function"
  );
}

単純なロガー

この例では、 <input> 要素に適用された新しい値に置き換える直前に、要素の現在の値をログに記録します。

HTML

html
<input placeholder="テキストを入力" name="name" />
<p id="values"></p>

JavaScript

js
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