内容可编辑光标位置

我有一个内容可编辑的div，我希望点击编辑按钮，光标出现在div的开头，在它结束时出现的那一刻。

 
Dior
 
 
 
Charlize-Theron 
 
 
 
Natalie-Portman 
 
 
 
Sharon-Stone 
 
 
 Edit 

因此，当您在分钟点击编辑时，您必须使用箭头键返回到开始编辑Dior（这是唯一真正被编辑的东西）。 但我试图将内容可编辑的代码添加到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的前面可能会有所帮助。 我很乐意将光标位置设置为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

检查： 在contentEditable

上设置光标位置

除了IE之外，还要检查document.selection.createRange。