內容可編輯的光標位置

Question

我有一個div thats內容可編輯，我希望點擊編輯按鈕，光標出現在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; 
       } 

如果有人能夠解釋爲什麼光標不在div的前面一些光自動，可以幫助。我很想將光標位置設置爲啓動IE之前的DIOR。

感謝您的幫助！

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。