我有一个内容可编辑的 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>
因此,当您立即单击“编辑”时,您必须使用箭头键返回到开头才能编辑 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。
谢谢您的帮助!
js小提琴:http://jsfiddle.net/X6Ab8/
Code:
$(".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();
}
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)