得到最后一个字符在插入符号前插入位置

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