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>

因此，当您在分钟点击编辑时，您必须使用箭头键返回到开始编辑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

检查：Set cursor position on contentEditable <div>

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

内容可编辑光标位置

2 个答案: