html 光标位置获取6,使用html-tags在contenteditable div中获取光标位置

我有以下div和按钮：

Add some text

我使用以下代码获取光标位置：

function getCaretPosition(editableDiv) {

var caretPos = 0,

sel, range;

if (window.getSelection) {

sel = window.getSelection();

if (sel.rangeCount) {

range = sel.getRangeAt(0);

if (range.commonAncestorContainer.parentNode == editableDiv) {

caretPos = range.endOffset;

}

}

} else if (document.selection && document.selection.createRange) {

range = document.selection.createRange();

if (range.parentElement() == editableDiv) {

var tempEl = document.createElement("span");

editableDiv.insertBefore(tempEl, editableDiv.firstChild);

var tempRange = range.duplicate();

tempRange.moveToElementText(tempEl);

tempRange.setEndPoint("EndToEnd", range);

caretPos = tempRange.text.length;

}

}

return caretPos;

}

如果您点击该按钮，则会添加：

Hello world!

如果您只在div中输入一些文本，一切正常：光标位置正确计算。但是，如果单击该按钮，则函数getCaretPosition将失败。

我想要什么？

我想要REAL光标位置。不是div的可见部分的光标位置。一个例子：

如果内容是

Hello world!

光标位置应为12。

但如果内容是

Hello world!

光标位置应为50.不是12.标签也应包括在内。

有没有人有想法？

我检查并尝试了以下答案：

提前致谢！