如何从contenteditable div中获取文本从开始到光标位置

Question

有没有办法从contenteditable div 获取文本从开始到光标位置。
例如：

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

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

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

Answer 1

这里是解决办法

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);
        }