獲取javascript中插入符號位置之前的最后一個字符

Question

我即將在我的contenteditable div中實現類似 Facebook 的集成，如果我給出 '$' 和一些像 'a' 這樣的字符，我需要一個自動建議，它應該在我的插入符號位置附近彈出。

我需要知道如何在 IE 和其他瀏覽器的 JavaScript 中找出插入符號位置之前的最后一個字符。 我可以訪問 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; } var editableEl = document.getElementById("editable"); var precedingCharEl = document.getElementById("precedingChar"); function reportCharacterPrecedingCaret() { precedingCharEl.innerHTML = "Character preceding caret: " + getCharacterPrecedingCaret(editableEl); } editableEl.onmouseup = editableEl.onkeyup = reportCharacterPrecedingCaret;

 <div contenteditable="true" id="editable">Here is some text. Please put the caret somewhere in here.</div> <div id="precedingChar" style="font-weight: bold"></div>