您在可內容光標定位上找到的大多數答案都相當簡單，因為它們只滿足普通文本的輸入。一旦在容器中使用html元素，輸入的文本就會被分割成節點，并在樹結構中自由分布。
為了設置光標位置，我有一個函數，它循環在所提供節點內的所有子文本節點，并設置一個范圍，從初始節點的開始到字符數性格：
function createRange(node, chars, range) {
if (!range) {
range = document.createRange()
range.selectNode(node);
range.setStart(node, 0);
}
if (chars.count === 0) {
range.setEnd(node, chars.count);
} else if (node && chars.count >0) {
if (node.nodeType === Node.TEXT_NODE) {
if (node.textContent.length < chars.count) {
chars.count -= node.textContent.length;
} else {
range.setEnd(node, chars.count);
chars.count = 0;
}
} else {
for (var lp = 0; lp < node.childNodes.length; lp++) {
range = createRange(node.childNodes[lp], chars, range);
if (chars.count === 0) {
break;
}
}
}
}
return range;};然后用這個函數調用例程：
function setCurrentCursorPosition(chars) {
if (chars >= 0) {
var selection = window.getSelection();
range = createRange(document.getElementById("test").parentNode, { count: chars });
if (range) {
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);
}
}};折疊(False)將光標設置為范圍的末尾。我用Chrome、IE、Mozilla和Opera的最新版本測試了它，它們都很好。
PS。如果有人感興趣，我將使用以下代碼獲得當前光標位置：
function isChildOf(node, parentId) {
while (node !== null) {
if (node.id === parentId) {
return true;
}
node = node.parentNode;
}
return false;};function getCurrentCursorPosition(parentId) {
var selection = window.getSelection(),
charCount = -1,
node;
if (selection.focusNode) {
if (isChildOf(selection.focusNode, parentId)) {
node = selection.focusNode;
charCount = selection.focusOffset;
while (node) {
if (node.id === parentId) {
break;
}
if (node.previousSibling) {
node = node.previousSibling;
charCount += node.textContent.length;
} else {
node = node.parentNode;
if (node === null) {
break
}
}
}
}
}
return charCount;};代碼執行與set函數相反的操作-它獲取當前的window.getSelections().ocusNode和ocusOffset，并向后計數所遇到的所有文本字符，直到它到達具有容器ID id的父節點為止。isChilOf函數只是在運行之前檢查所述節點是否實際上是所提供的節點的子節點。父母.
這些代碼應該在不改變的情況下直接工作，但是我剛剛從我開發的jQuery插件中獲取了它，所以我已經黑掉了幾個這是-如果有什么不管用的話，請告訴我！
