如何从contenteditable div开始到光标位置的文本

时间:2013-12-24 12:29:51

标签: javascript jquery cursor-position

有没有办法让contenteditable div的文字从开头到光标位置
例如:

<div id="editableDiv" contenteditable="true">
    the quick brown fox jumps over a lazy dog.
</div>  

假设1:光标在快速之后闪烁。对函数的查询必须返回快速

假设2:句子末尾的光标闪烁。对函数的查询必须返回快速棕色狐狸跳过一只懒狗。

1 个答案:

答案 0 :(得分:4)

这是解决方案

getTextFromHeadToCaret: function () {
            var element = document.getElementById("editableDiv");
            var caretOffset = 0;
            if (typeof window.getSelection != "undefined") {
                var range = window.getSelection().getRangeAt(0);
                var preCaretRange = range.cloneRange();
                preCaretRange.selectNodeContents(element);
                preCaretRange.setEnd(range.endContainer, range.endOffset);
                caretOffset = preCaretRange.toString().length;
            } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
                var textRange = document.selection.createRange();
                var preCaretTextRange = document.body.createTextRange();
                preCaretTextRange.moveToElementText(element);
                preCaretTextRange.setEndPoint("EndToEnd", textRange);
                caretOffset = preCaretTextRange.text.length;
            }
            var divStr = $('#editableDiv').text();
            return divStr.substring(0, caretOffset);
        }