그래서 문제를 재현 DIV

Question

에 첨부 된 문자열의 끝에 커서/캐럿을 다시 설정, 여기에 놀러 바이올린입니다 : 안녕하세요 @An

: 상자에 다음과 같은 문자열

유형 http://jsfiddle.net/QRgE9/1/

드롭 다운에서 선택하십시오.

선택을 완료하면 커서는 찾을 위치가 아니며 사용자가 div를 다시 클릭해야한다는 것을 알 수 있습니다. 선택을 한 후에 커서가 깜박이도록 (포커스를 잃지 않도록) 어떻게 만들 수 있습니까? 나는 facebook이 이것을 잘 할 수 있다는 것을 안다. 그래서 나는 뭔가를 놓치고 있다고 생각한다.

또한 커서가 문자열 끝에 항상 추가되지는 않습니다. 대소 문자를 문자열 중간에 삽입하면 커서는 문자열 중간에서 다시 시작됩니다.

$(".display_box").live("mousedown",function(event) 
    { 
     $("#friendsList").hide(); 
     selRange = saveSelection(); 
     var startOffset = selRange.startOffset; 
     var endOffset = selRange.endOffset; 

     var username = $(this).attr('title'); 
     var currentContent = $("#recommendTextArea").html(); 
     var E ="<span contenteditable='false' title=\"" + username + "\">"+ username + "</span> "; 
     var newContent = currentContent.replace(word, E); //replacing @abc to users real name 
     $("#recommendTextArea").html(newContent); 

     selRange.setStart($("#recommendTextArea")[0].childNodes[0], startOffset); 
     selRange.setEnd($("#recommendTextArea")[0].childNodes[0], endOffset); 
     restoreSelection(selRange); 
     event.preventDefault(); 

    }); 

Answer 1

이, 잃어버린 초점 문제를 해결하는 대신 mousedown의 click와 이벤트 처리기를 바인딩하려면 다음 초점을 수동으로 설정 : 여기

는 사용자가 선택을 할 때 트리거되는 코드의

$(".display_box").live("click",function(event) /* <--- this was changed */ 
{ 
    $("#friendsList").hide(); 
    selRange = saveSelection(); 
    var startOffset = selRange.startOffset; 
    var endOffset = selRange.endOffset; 

    var username = $(this).attr('title'); 
    var currentContent = $("#recommendTextArea").html(); 
    var E ="<span contenteditable='false' title=\"" + username + "\">"+ username + "</span> "; 
    var newContent = currentContent.replace(word, E); //replacing @abc to users real name 
    $("#recommendTextArea").html(newContent).focus(); /* <--- this was added */ 

    selRange.setStart($("#recommendTextArea")[0].childNodes[0], startOffset); 
    selRange.setEnd($("#recommendTextArea")[0].childNodes[0], endOffset); 
    restoreSelection(selRange); 
    event.preventDefault(); 

});