jquery Setting cursor position in contenteditable div

Question

The old version of the question is below, after researching more, I decided to rephrase the question. The problem as before is, I need to focus a contenteditable div without highlighting the text, doing straight up focus highlights the text in Chrome.

I realize that people solved this problems in textareas by resetting the caret position in the textarea. How can I do that with a contenteditable element? All the plugins I've tried only works with textareas. Thanks.

Old Phrasing of the question:

I have a contenteditable element that I want to focus, but only insofar as to place the cursor at the front of the element, rather selecting everything.

elem.trigger('focus'); with jquery selects all the text in the entire element in chrome. Firefox behaves correctly, setting the caret at the front of the text. How can I get Chrome to behave the way I want, or is focus perhaps not what I'm looking for.

Thanks all.

This [previous question](http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area) may help with cursor positioning. — Ken Redler, May 20 '10 at 04:56
Are you sure those work on contenteditable. I was not able to get those to work. — Mark, May 20 '10 at 05:15
@Mark: i have updated the code to latest jquery and modified the demo to work with rich content. — Luca Filosofi, Apr 15 '14 at 09:59

Tim Down · Answer 1 · 2010-06-01T23:59:36.257

30

Maybe I'm misreading the question, but wouldn't the following do (assuming an editable <div> with id "editable")? The timer is there because in Chrome, the native browser behaviour that selects the whole element seems to trigger after the focus event, thereby overriding the effect of the selection code unless postponed until after the focus event:

var div = document.getElementById("editable");

div.onfocus = function() {
    window.setTimeout(function() {
        var sel, range;
        if (window.getSelection && document.createRange) {
            range = document.createRange();
            range.selectNodeContents(div);
            range.collapse(true);
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToElementText(div);
            range.collapse(true);
            range.select();
        }
    }, 1);
};

div.focus();

edited Jun 01 '10 at 23:59

answered Jun 01 '10 at 09:27

Tim Down

318,141
75
454
536

1

Awe!, this is a beautiful thing! Thank you Tim. – Senica Gonzalez Mar 27 '11 at 11:32
1

My god, Tim, how did you do that. Thanks. – pilau Mar 18 '13 at 17:37
this is great, but how do I put the focus at the end of the div instead of the front? http://jsfiddle.net/bq6jQ/1/ http://stackoverflow.com/questions/22599694/how-can-i-type-inside-the-parent-contenteditable-div – Squirrl Mar 24 '14 at 02:59
2

@Squirrl: Change both instances of `range.collapse(true);` to `range.collapse(false);`. – Tim Down Mar 24 '14 at 09:21

Luca Filosofi · Accepted Answer · 2018-04-28T17:49:09.250

20

demo: http://so.lucafilosofi.com/jquery-setting-cursor-position-in-contenteditable-div/

      <div id="editable" contentEditable="true">
            <h2>Lorem</h2> <p>ipsum dolor <i>sit</i> 
               amet, consectetur <strong>adipiscing</strong> elit.</p> Aenean.
        </div>

    <script type="text/javascript">
        $(function () {
            $('[contentEditable="true"]').on('click', function (e) {
                if (!$(this).hasClass('editing')) {
                    var html = $(this).html();
                    if (html.length) {
                        var range = rangy.createRange();
                        $(this).toggleClass('editing').html('<span class="content-editable-wrapper">' + html + '</span>');
                        var $last = $(this).find('.content-editable-wrapper');
                        range.setStartAfter($last[0]);
                        range.collapse(false);
                        rangy.getSelection().setSingleRange(range);
                    }
                }
            }).on('blur', function () {
                $(this).toggleClass('editing').find('.content-editable-wrapper').children().last().unwrap();
            });
        });
    </script>

NOTE: make use of rangy.js https://code.google.com/p/rangy/

edited Apr 28 '18 at 17:49

answered May 27 '10 at 10:08

Luca Filosofi

30,905
9
70
77

1

That's an interesting hack, great idea actually. Thank you. But the contenteditable is a wysiwyg editor, so I can't just substitute a textfield. – Mark May 28 '10 at 06:20
1

An interesting idea, and valuable for some I'm sure, but this does not answer the question of how to set the carat position on a contenteditable div. Adding a "fake" input box is not really a solution; if I wanted to use an input, I would have used an input. – Zane Claes Dec 24 '12 at 14:28
does not answer the question. better answer at http://stackoverflow.com/questions/1181700/set-cursor-position-on-contenteditable-div – jaredjacobs Jan 18 '13 at 23:30
i have updated the code to the latest jQuery version and modified the demo to work as expected also with rich content. without adding extra input or textarea. – Luca Filosofi Apr 15 '14 at 10:00

score 3 · Answer 3 · answered May 20 '10 at 05:09

3

Yes it happens because you have used

elem.trigger('focus');

try to use class or to identify the element on which you want to fire a trigger event.

answered May 20 '10 at 05:09

Chirag

902
1
9
10

score 1 · Answer 4 · answered Jun 09 '10 at 17:26

1

I managed to solve that problem after a bit of poking around the DOM.

elm.focus();
window.getSelection().setPosition(0);

It probably only works on WebKit browsers, but since it is the only source of the problem, I added a conditional (using jQuery)

if(!$.browser.webkit) {
    elm.focus();
} else {
    elm.focus();
    window.getSelection().setPosition(0);
}

Hope this solves your problem.

answered Jun 09 '10 at 17:26

DfKimera

2,076
2
21
39

hmm, not sure why, that doesn't work for me. Tim Down's answer does though. – Mark Jun 09 '10 at 22:09

score 0 · Answer 5 · answered Jan 29 '18 at 04:13

Set pointer position in pre or div tag:

function setCursor(pos) {
    var el = document.getElementById("asd");
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(el.childNodes[0], pos);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    el.focus();
}

$('button').click(function () {
    setCursor(5);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="asd" contenteditable="true" >
asd
two
</div>
<button>Set caret position</button>

Source: https://social.msdn.microsoft.com/Forums/en-US/f91341cb-48b3-424b-9504-f2f569f4860f/getset-caretcursor-position-in-a-contenteditable-div?forum=winappswithhtml5

reza · Answer 6 · 2022-11-04T04:59:11.123

for example for inserting image in cursor position:

var insertImgTag = document.createElement("div");
insertImgTag.id = "insertImgTag";
if (document.getSelection().anchorNode != null) {
    document.getSelection().getRangeAt(0).insertNode(insertImgTag);}

then select created element:

$("#insertImgTag")
            .parent()
            .html(
                "<img src=/images/" + $("#name").val() + " width='" + imgWidth + "%' alt='" + imgAlt + "'>"
            );

jquery Setting cursor position in contenteditable div

6 Answers6

Linked