得到最後一個字符在插入符號前插入位置

Question

我即將實施Facebook在我的contenteditable div集成如果我給'$'和一些像'a'字符我需要一個自動建議應該彈出靠近我的位置。

我需要知道如何在插入位置前找出最後一個字符，無論是在JavaScript中的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; 
}