JavaScriptのキャレット位置の前に最後の文字を取得

Question

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