Question

我即将在我的 contenteditable div 中实现Facebook，如果我给'$'和某些字符如'a'我需要一个自动建议，它应该出现在我的插入符号附近位置。

我需要知道如何在JavaScript for IE和其他浏览器中找到插入位置之前的最后一个字符。我可以访问Jquery库。

(function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if ('selectionStart' in input) {
            // Standard-compliant browsers
            return input.selectionStart;
        } else if (document.selection) {
            // IE
            input.focus();
            var sel = document.selection.createRange();
            var selLen = document.selection.createRange().text.length;
            sel.moveStart('character', -input.value.length);
            return sel.text.length - selLen;
        }
    }
})(jQuery);

eg.
var caretPosition = $("#contenteditablediv").getCursorPosition();
var lastchar = getchar(caretposition -1);???

Answer 1

以下是如何执行此操作的示例。它创建一个范围，从可编辑元素的开头开始，在插入符号之前结束，获取范围的文本并返回该范围的最后一个字符。

演示：http://jsfiddle.net/MH5xX/

代码：

function getCharacterPrecedingCaret(containerEl) {
    var precedingChar = "", sel, range, precedingRange;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount > 0) {
            range = sel.getRangeAt(0).cloneRange();
            range.collapse(true);
            range.setStart(containerEl, 0);
            precedingChar = range.toString().slice(-1);
        }
    } else if ( (sel = document.selection) && sel.type != "Control") {
        range = sel.createRange();
        precedingRange = range.duplicate();
        precedingRange.moveToElementText(containerEl);
        precedingRange.setEndPoint("EndToStart", range);
        precedingChar = precedingRange.text.slice(-1);
    }
    return precedingChar;
}

在javascript中获取插入位置之前的最后一个字符

1 个答案: