content editable cursor position

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!

Tim Down · Accepted Answer · 2011-08-30T12:25:43.920

5

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

edited Aug 30 '11 at 12:25

answered Aug 29 '11 at 16:22

Tim Down

292,637
67
429
506

This is exactly what I am looking for! When I click on the edit button I get resize handles :S any way to avoid this? Thanks! – Tara Irvine Aug 30 '11 at 15:28
@Tara: I'd make all the form controls non-editable (using `contenteditable="false"`) if you want them to function. – Tim Down Aug 30 '11 at 15:45
Sorry how do i do that? In Firefox I get the resize handles on the link, I don't want that, but that div needs to be editable. Any ideas? – Tara Irvine Aug 31 '11 at 07:07
@Tara, I realize my comment is way later, but there is a CSS rule for W3C browsers. See: http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting For IE, you will need to add another HTML attribute `unselectable='on` – zedd45 May 18 '13 at 22:12

score 1 · Answer 2 · edited May 23 '17 at 11:59

1

Check: Set cursor position on contentEditable <div>

In addition for IE's, check also document.selection.createRange.

edited May 23 '17 at 11:59

Community

1
1

answered Aug 29 '11 at 12:27

Samuli Hakoniemi

16,628
1
55
71

content editable cursor position

2 Answers2

Linked