將插入符號位置設置在contenteditable div中的特定位置

Question

在標記重復/下降之前看到

1. contenteditable div 不會有子元素
2. 我不想在div的末尾設置位置
3. 我不想要跨瀏覽器解決方案 ，只需要Chrome支持
4. 只有vanilla JS ，沒有庫。

我見過很多解決方案。 很多人都是Tim Down和其他人。 但沒有一個可行。 我見過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);

Answer 1

您需要將插入符號放在元素內的文本節點中，而不是元素本身。 假設您的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);