☰

コンテンツ編集可能な要素 (div) でキャレット (カーソル) の位置を設定するにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon javascript jquery contenteditable caret cursor-position
コンテンツ編集可能な要素 (div) でキャレット (カーソル) の位置を設定するにはどうすればよいでしょうか? 質問する

例として、次の簡単な HTML があります。

<div id="editable" contenteditable="true">
  text text text<br>
  text text text<br>
  text text text<br>
</div>
<button id="button">focus</button>

シンプルなものが欲しいです - ボタンをクリックすると、編集可能な div 内の特定の場所にキャレット (カーソル) を配置したいです。Web で検索したところ、ボタンのクリックにこの JS が添付されているのですが、動作しません (FF、Chrome):

const range = document.createRange();
const myDiv = document.getElementById("editable");
range.setStart(myDiv, 5);
range.setEnd(myDiv, 5);

このように手動でキャレットの位置を設定することは可能ですか?

ベストアンサー1

ほとんどのブラウザでは、RangeそしてSelectionオブジェクト。各選択境界をノードとして指定し、そのノード内のオフセットを指定します。たとえば、キャレットをテキストの 2 行目の 5 番目の文字に設定するには、次のようにします。

function setCaret() {
    var el = document.getElementById("editable")
    var range = document.createRange()
    var sel = window.getSelection()
    
    range.setStart(el.childNodes[2], 5)
    range.collapse(true)
    
    sel.removeAllRanges()
    sel.addRange(range)
}
<div id="editable" contenteditable="true">
  text text text<br>text text text<br>text text text<br>
</div>

<button id="button" onclick="setCaret()">focus</button>

IE < 9 では動作がまったく異なります。これらのブラウザをサポートする必要がある場合は、別のコードが必要になります。

jsFiddle の例:http://jsfiddle.net/timdown/vXnCM/

おすすめ記事