web-dev-qa-db-ja.com

contenteditable divの特定の位置にキャレットの位置を設定します

重複/ダウン投票をマーキングする前に参照してください

  1. Contenteditable divには子要素がありません
  2. Divの端に位置を設定したくない
  3. 私はクロスブラウザソリューションを望まない、Chromeサポートのみが必要
  4. Vanilla JSのみ、ライブラリなし。

私は多くの解決策を見てきました。多くはティム・ダウンなどによるものです。しかし、どれも機能しません。私は見た window.getSelection、.addRangeなど。ただし、ここでどのように適用されるかはわかりません。

これが jsfiddle です。

（試してみました）コード：

var node = document.querySelector("div");
node.focus();
var caret = 10; // insert caret after the 10th character say
var range = document.createRange();
range.setStart(node, caret);
range.setEnd(node, caret);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
javascripthtmlgoogle-chromeselectioncaret
15
Gaurang Tandon

要素自体ではなく、要素内のテキストノード内にキャレットを配置する必要があります。 HTMLが<div contenteditable="true">Some text</div>、要素のfirstChildプロパティを使用して、テキストノードを取得します。

JsFiddleの更新：

http://jsfiddle.net/xgz6L/8/

コード：

var node = document.querySelector("div");
node.focus();
var textNode = node.firstChild;
var caret = 10; // insert caret after the 10th character say
var range = document.createRange();
range.setStart(textNode, caret);
range.setEnd(textNode, caret);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
30
Tim Down