[Edge]。→、、
InputEvent 入力イベントがキャンセルされない場合に DOM への変更によって影響を受ける静的範囲 StaticRange の配列を返します。
これにより、ブラウザーが DOM ツリーを変更する前に、Web アプリがテキスト編集動作をオーバーライドできるようになります。入力イベントをより詳細に制御して、パフォーマンスを向上させます。
StaticRange オブジェクトの配列。
次の関数は、beforeinput の場合に true を返します。したがって、getTargetRanges がサポートされています。
function isBeforeInputEventAvailable() {
return window.InputEvent && typeof InputEvent.prototype.getTargetRanges === "function";
}
次の例では、contenteditable 要素を選択し、beforeinput イベントを使用して getTargetRanges() の結果をログに記録します。
const editableElem = document.querySelector('[contenteditable="true"]');
editableElem.addEventListener('beforeinput', (e) => {
const targetRanges = e.getTargetRanges();
console.log(targetRanges);
})
HTML：
<SPAN id=IdTest1 contenteditable>[SPAN要素。編集可能]</SPAN><BR> <INPUT id=IdTest2 value="INPUT"><BR> <SPAN id=IdLog></SPAN>
JavaScript：
function Job(eve){ //beforeinputイベントの処理：
D=eve; //＝[object]：[object InputEvent]。contenteditable な要素でFEPにより「[SPAN要素」の「要」で「あ」とタイピングした。
詳細
//isTrusted＝[boolean]：true
//data＝[string]：あ
//isComposing＝[boolean]：false
//inputType＝[string]：insertText
//dataTransfer＝[object]：null
//getTargetRanges＝[function]：function getTargetRanges() { [native code] }
//view＝[object]：null
//detail＝[number]：0
//sourceCapabilities＝[object]：null
//which＝[number]：0
//initUIEvent＝[function]：function initUIEvent() { [native code] }
//type＝[string]：beforeinput
//target＝[object]：[object HTMLSpanElement]
//currentTarget＝[object]：null
//eventPhase＝[number]：0
//bubbles＝[boolean]：true
//cancelable＝[boolean]：true
//defaultPrevented＝[boolean]：false
//composed＝[boolean]：true
//…
DA=eve.getTargetRanges();＝[object]：[object StaticRange]
//0＝[object]：[object StaticRange]
IdLog.innerHTML=IdLog.innerHTML+"●"; //表示。
}
IdTest1.onbeforeinput=Job; //イベント割り当て。
IdTest2.onbeforeinput=Job; //イベント割り当て。
INPUT 要素では eve.getTargetRanges() はヌルオブジェクトだった。
DA[0]は、
//＝[object]：[object StaticRange]
//startContainer＝[object]：[object Text]
//startOffset＝[number]：5
//endContainer＝[object]：[object Text]
//endOffset＝[number]：5
//collapsed＝[boolean]：true
入力された場所がわかるようだ。