javascript获取放置光标的其余文本

时间:2014-06-06 20:58:48

标签: javascript jquery html text

如何根据光标的位置在contenteditable div中获取剩余的左侧或右侧文本?

enter image description here

1 个答案:

答案 0 :(得分:1)

这是一种获取光标右侧和左侧内容的方法。它还没有使用换行符,标签或可能在可编辑div中的任何其他内容进行测试,但它是我之前使用过的函数。

http://jsfiddle.net/jayblanchard/Dez48/

function getCursorPosition(editableDiv) {
    var cursorPos = 0,
        containerEl = null,
        sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            if (range.commonAncestorContainer.parentNode == editableDiv) {
                cursorPos = 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);
            cursorPos = tempRange.text.length;
        }
    }
    return cursorPos;
}

$('#content').on('click', function () {
    var currentText = $(this).text();
    var cursor = getCursorPosition(this);
    $('#left').text(currentText.substring(0, cursor));
    $('#right').text(currentText.substring(cursor));

});