内容可编辑的光标位置 [英] content editable cursor position

问题描述

我有一个可编辑内容的div，我希望单击编辑"按钮，并且光标出现在div的开头，即它出现在末尾的那一刻.

I have a div thats content editable and I wish to click on the edit button and the cursor appears at the start of the div, at the minute it appears at the end.

<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中，但这是行不通的.

So when you click on edit at the minute, you have to arrow key back to the start to edit the Dior (which is the only thing that really get's edited). but i've tried to add the content editable code to the div only and it doesn't work.

这是我的一些jQuery

Here's some of my 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 Before DIOR.

If someone can shed some light on why the cursor isn't at the front of the div automatically that could help. I would love to set the cursor position to the start IE Before DIOR.

感谢您的帮助！

推荐答案

jsFiddle: http://jsfiddle.net/X6Ab8/

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();
    }
});

这篇关于内容可编辑的光标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！