Question

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>

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.

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

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.

Thanks for the help!

Answer 1

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