자바 스크립트에서 캐럿 위치 앞에 마지막 문자 가져 오기

Question

내 contenteditable div에 통합과 같은 페이스 북을 구현하려고합니다. '$'와 '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; 
}