InputEvent: getTargetRanges() メソッド

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.

getTargetRanges() は InputEvent インターフェイスのメソッドで、入力イベントが取り消されない限り DOM の変更に影響される静的範囲を配列で返します。

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

構文

js
getTargetRanges()

引数

なし。

返値

StaticRange オブジェクトの配列です。

例

機能検出

以下の関数は、beforeinput、つまり getTargetRanges に対応している場合に true を返します。

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

基本的な使い方

以下の例では、 contentitable 要素を選択して、 beforeinput イベントを利用して getTargetRanges() の結果をログ出力しています。

js
const editableElem = document.querySelector('[contenteditable="true"]');

editableElem.addEventListener("beforeinput", (e) => {
  const targetRanges = e.getTargetRanges();
  console.log(targetRanges);
});

仕様書

Specification
Input Events Level 2
# dom-inputevent-gettargetranges

ブラウザーの互換性

BCD tables only load in the browser