내용 편집 가능한 커서 위치

Question

편집 할 수있는 div 내용이 있고 편집 버튼을 클릭하면 커서가 div의 시작 부분에 나타나며 끝에 표시됩니다. 당신이 순간에 편집을 클릭하면

<li style="display: list-item;" class="menu-item" contenteditable="true"> 
<div class="">Dior<input type="checkbox" name="selected"></div> 
<ol class=""> 
    <li style="display: list-item;" class="menu-item"> 
    <div class=""><a href="/portfolios/charlize-theron" class="" name="">Charlize-Theron</a> 
    <input type="checkbox" name="selected"></div> 
    </li> 
    <li style="display: list-item;" class="menu-item"> 
    <div class=""><a href="/portfolios/natalie-portman" class="" name="">Natalie-Portman</a> 
    <input type="checkbox" name="selected"></div> 
    </li> 
    <li style="display: list-item;" class=""> 
    <div class=""><a href="/portfolios/sharon-stone-1" class="" name="">Sharon-Stone</a> 
    <input type="checkbox" name="selected"></div> 
    </li> 
</ol> 
<a href="#" class="edit" style="opacity: 1; ">Edit</a></li> 

그래서, 당신은 (정말의 편집 얻을 수있는 유일한 일) 디올을 편집하기 시작으로 다시 화살표 키를해야합니다. 하지만 편집 할 수있는 코드를 div에 추가하려고 시도했지만 작동하지 않습니다.

여기에 누군가가 자동으로 도울 수 커서 사업부의 전면에 있지 않은 이유에 도움이 되거 수 내 jQuery를

$(".edit").click(function(){ 
      $(this).parent().children("div").focus(function(){ 

      }); 
     }); 

     $(".edit").hover(function(){ 
      $(this).css("opacity","0.5") 
     }, function(){ 
      $(this).css("opacity","1") 
     }); 

     $(".edit").parent().blur(function(){ 
      var sortableList = $(".sortable").html(); 
      $("#ItemDescription").val(sortableList); 
     }); 

function storeUserScribble(id) { 
       var scribble = $("li div").text(); 
       localStorage.setItem('userScribble',scribble); 
       } 

       function getUserScribble() { 
       if (localStorage.getItem('userScribble')) { 
        var scribble = localStorage.getItem('userScribble'); 
       } 
       else { 
       } 
       } 

       function clearLocal() { 
       clear: localStorage.clear(); 
       return false; 
       } 

경우 일부입니다. DIOR 전에 IE 시작 위치로 커서 위치를 설정하고 싶습니다.

도움 주셔서 감사합니다.

Answer 1

jsFiddle : http://jsfiddle.net/X6Ab8/

코드 :

$(".edit").click(function(e) { 
    e.preventDefault(); 

    var div = $(this).parent().children("div")[0]; 
    div.focus(); 

    if (window.getSelection && document.createRange) { 
     // IE 9 and non-IE 
     var sel = window.getSelection(); 
     var range = document.createRange(); 
     range.setStart(div, 0); 
     range.collapse(true); 
     sel.removeAllRanges(); 
     sel.addRange(range); 
    } else if (document.body.createTextRange) { 
     // IE < 9 
     var textRange = document.body.createTextRange(); 
     textRange.moveToElementText(div); 
     textRange.collapse(true); 
     textRange.select(); 
    } 
}); 

Answer 2

확인 : Set cursor position on contentEditable <div> IE의에 대한 또한

, document.selection.createRange도 확인한다.