内容可编辑的光标位置

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。