キー押しイベントが発生した後のテキストカーソル位置の取得方法は？

Question

シンタックスハイライトを書いています。ハイライターは、テキストを入力して矢印キーでナビゲートするとすぐに強調表示を更新する必要があります。

私が直面している問題は、 'keypress'イベントが発生すると、まだテキストカーソルの古い位置がwindow.getSelection()であるということです。

例：例では

function handleKeyEvent(evt) { 
 
    console.log(evt.type, window.getSelection().getRangeAt(0).startOffset); 
 
} 
 

 
var div = document.querySelector("div"); 
 
div.addEventListener("keydown", handleKeyEvent); 
 
div.addEventListener("keypress", handleKeyEvent); 
 
div.addEventListener("input", handleKeyEvent); 
 
div.addEventListener("keyup", handleKeyEvent);

<div contenteditable="true">f<span class="highlight">oo</span></div>

、単語 'foo' で前にキャレットを置き、その後、（右矢印キー）→を押してください。

お気に入りのDevToolのコンソールで次のように表示されます：

keydown 0 
keypress 0 
keyup 1 

0keypress以外は明らかに古いキャレット位置していること。

keydown 0 
keypress 0 
keydown 1 
keypress 1 
keydown 1 
keypress 1 
keydown 2 
keypress 2 
keyup 2 

私は何を取得したいが、私は「からkeyup」または「入力」のそれを得るのと同じように新しいキャレット位置がある：あなたがダウン少し長く→保持する場合は、このような何かを得るでしょう。 「キーアップ」は遅すぎます（実際に何らかの入力があったとしても入力が行われませんが、→は入力を生成しません）。

入力時だけでなく、キャレット位置が変更された後に発生するイベントはありますか？または、テキストカーソルの位置を計算する必要がありますか？ （私はこれはときにテキストラップはかなり複雑に得ることができ、あなたが↓（下矢印キー）を押すと仮定します。）

Answer 1

あなたは非同期​​イベントを処理するためにsetTimeoutを使用することができます。

function handleKeyEvent(evt) { 
 
    setTimeout(function() { 
 
     console.log(evt.type, window.getSelection().getRangeAt(0).startOffset); 
 
    }, 0); 
 
} 
 

 
var div = document.querySelector("div"); 
 
div.addEventListener("keydown", handleKeyEvent);

<div contenteditable="true">This is some text</div>

この方法は、キー処理の問題を解決します。

function handleKeyEvent(evt) { 
 
    var caretPos = window.getSelection().getRangeAt(0).startOffset; 
 

 
    if (evt.type === "keydown") { 
 
    switch(evt.key) { 
 
     case "ArrowRight": 
 
     if (caretPos < evt.target.innerText.length - 1) { 
 
      caretPos++; 
 
     } 
 
     break; 
 

 
     case "ArrowLeft": 
 
     if (caretPos > 0) { 
 
      caretPos--; 
 
     } 
 
     break; 
 

 
     case "ArrowUp": 
 
     case "Home": 
 
     caretPos = 0; 
 
     break; 
 

 
     case "ArrowDown": 
 
     case "End": 
 
     caretPos = evt.target.innerText.length; 
 
     break; 
 

 
     default: 
 
     return; 
 
    } 
 
    } 
 
    console.log(caretPos); 
 
} 
 

 
var div = document.querySelector("div"); 
 
div.addEventListener("keydown", handleKeyEvent); 
 
div.addEventListener("input", handleKeyEvent);

<div contenteditable="true">f<span class="highlight">oo</span></div>

：あなたの例では、あなたはまた、

window.getSelection().getRangeAt(0).startOffset 

Answer 2

によって返された位置の値がここにKeyDownイベント」イベントを使用して位置を補正ソリューションです変更div、内部のspan要素を持っています

残念ながら、この解決策はそのまま、いくつかの欠点があります。

• 例の<span>のような子要素の内部には、正しいstartOffsetも正しいstartContainerもありません。
• 複数の行を処理することはできません。
• すべてのナビゲーションオプションを処理するわけではありません。例えば。 Ctrl + →/←を介して単語単位でジャンプします。

私が考えなかった問題が多分あります。これらの問題をすべて処理することは可能ですが、実装が非常に複雑になります。したがって、ConnorsFanによって提供される単純なsetTimeout(..., 0)ソリューションは、event for caret position changesが存在するまでは間違いありません。