119

I need to move caret to end of contenteditable node like on Gmail notes widget.

I read threads on StackOverflow, but those solutions are based on using inputs and they doesn't work with contenteditable elements.

9 Answers 9

291

Geowa4's solution will work for a textarea, but not for a contenteditable element.

This solution is for moving the caret to the end of a contenteditable element. It should work in all browsers which support contenteditable.

function setEndOfContenteditable(contentEditableElement)
{
    var range,selection;
    if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
    {
        range = document.createRange();//Create a range (a range is a like the selection but invisible)
        range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
        range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
        selection = window.getSelection();//get the selection object (allows you to change selection)
        selection.removeAllRanges();//remove any selections already made
        selection.addRange(range);//make the range you have just created the visible selection
    }
    else if(document.selection)//IE 8 and lower
    { 
        range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
        range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
        range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
        range.select();//Select the range (make it the visible selection
    }
}

It can be used by code similar to:

elem = document.getElementById('txt1');//This is the element that you want to move the caret to the end of
setEndOfContenteditable(elem);
18
  • 1
    geowa4's solution will work for textarea's in chrome, it will not work for contenteditable elements in any browser. mine works for contenteditable elements, but not for textareas.
    – Nico Burns
    Oct 5, 2010 at 18:11
  • 5
    This is the correct answer to this question, perfect, thanks Nico.
    – Rob
    Apr 30, 2012 at 10:17
  • 8
    The selectNodeContents part of Nico's was giving me errors in both Chrome and FF (didn't test other browsers) until I found out that I apparently needed to add .get(0) to the element that I was feeding the function. I guess this has to do with me using jQuery instead of bare JS? I learned this from @jwarzech at question 4233265. Thanks to all! Sep 7, 2012 at 2:05
  • 5
    Yes, the function expects a DOM element, not a jQuery object. .get(0) retrieves the dom element which jQuery stores internally. You can also append [0], which is equivalent to .get(0) in this context.
    – Nico Burns
    Sep 7, 2012 at 16:00
  • 1
    @Nico Burns: I tried your method and it didn't work on FireFox.
    – Lewis
    May 24, 2014 at 18:05
48

If you don't care about older browsers, this one did the trick for me.

// [optional] make sure focus is on the element
yourContentEditableElement.focus();
// select all the content in the element
document.execCommand('selectAll', false, null);
// collapse selection to the end
document.getSelection().collapseToEnd();
7
  • this is the only thing that worked for me inside a background script for a chrome extension
    – Rob
    Jun 21, 2019 at 5:01
  • 1
    This works fine. Tested on chrome 71.0.3578.98 and WebView on Android 5.1.
    – maswerdna
    Aug 1, 2019 at 18:30
  • 6
    document.execCommand is obsolete now developer.mozilla.org/en-US/docs/Web/API/Document/execCommand . Mar 11, 2020 at 19:30
  • 2020 and this still works in chrome Version 83.0.4103.116 (Official Build) (64-bit) Jul 30, 2020 at 1:46
  • nice and easy, i like it.
    – Wayne Wei
    Feb 16, 2021 at 14:05
31

There is also another problem.

The Nico Burns's solution works if the contenteditable div doesn't contain other multilined elements.

For instance, if a div contains other divs, and these other divs contain other stuff inside, could occur some problems.

In order to solve them, I've arranged the following solution, that is an improvement of the Nico's one:

//Namespace management idea from http://enterprisejquery.com/2010/10/how-good-c-habits-can-encourage-bad-javascript-habits-part-1/
(function( cursorManager ) {

    //From: http://www.w3.org/TR/html-markup/syntax.html#syntax-elements
    var voidNodeTags = ['AREA', 'BASE', 'BR', 'COL', 'EMBED', 'HR', 'IMG', 'INPUT', 'KEYGEN', 'LINK', 'MENUITEM', 'META', 'PARAM', 'SOURCE', 'TRACK', 'WBR', 'BASEFONT', 'BGSOUND', 'FRAME', 'ISINDEX'];

    //From: https://stackoverflow.com/questions/237104/array-containsobj-in-javascript
    Array.prototype.contains = function(obj) {
        var i = this.length;
        while (i--) {
            if (this[i] === obj) {
                return true;
            }
        }
        return false;
    }

    //Basic idea from: https://stackoverflow.com/questions/19790442/test-if-an-element-can-contain-text
    function canContainText(node) {
        if(node.nodeType == 1) { //is an element node
            return !voidNodeTags.contains(node.nodeName);
        } else { //is not an element node
            return false;
        }
    };

    function getLastChildElement(el){
        var lc = el.lastChild;
        while(lc && lc.nodeType != 1) {
            if(lc.previousSibling)
                lc = lc.previousSibling;
            else
                break;
        }
        return lc;
    }

    //Based on Nico Burns's answer
    cursorManager.setEndOfContenteditable = function(contentEditableElement)
    {

        while(getLastChildElement(contentEditableElement) &&
              canContainText(getLastChildElement(contentEditableElement))) {
            contentEditableElement = getLastChildElement(contentEditableElement);
        }

        var range,selection;
        if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
        {    
            range = document.createRange();//Create a range (a range is a like the selection but invisible)
            range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
            range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
            selection = window.getSelection();//get the selection object (allows you to change selection)
            selection.removeAllRanges();//remove any selections already made
            selection.addRange(range);//make the range you have just created the visible selection
        }
        else if(document.selection)//IE 8 and lower
        { 
            range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
            range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
            range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
            range.select();//Select the range (make it the visible selection
        }
    }

}( window.cursorManager = window.cursorManager || {}));

Usage:

var editableDiv = document.getElementById("my_contentEditableDiv");
cursorManager.setEndOfContenteditable(editableDiv);

In this way, the cursor is surely positioned at the end of the last element, eventually nested.

EDIT #1: In order to be more generic, the while statement should consider also all the other tags which cannot contain text. These elements are named void elements, and in this question there are some methods on how to test if an element is void. So, assuming that exists a function called canContainText that returns true if the argument is not a void element, the following line of code:

contentEditableElement.lastChild.tagName.toLowerCase() != 'br'

should be replaced with:

canContainText(getLastChildElement(contentEditableElement))

EDIT #2: The above code is fully updated, with every changes described and discussed

4
  • Interesting, I would have expected the browser to take care of this case automatically (not that I'm surprised that it doesn't, browsers never seem to do the intuitive things with contenteditable). Do you have an example of HTML where your solution works but mine doesn't?
    – Nico Burns
    Nov 18, 2013 at 5:18
  • In my code there was one other error. I fixed it. Now, you can verify that my code works in this page, while yours doesn't Nov 18, 2013 at 16:48
  • I am getting an error using your function, the console says Uncaught TypeError: Cannot read property 'nodeType' of null and this is from the getLastChildElement function being called. Do you know what might be causing this problem?
    – Derek
    Jan 2, 2015 at 21:56
  • @VitoGentile it's a little old answer but I want to notice that your solution only takes care of block elements, if there is in-line elements inside, then the cursor will be positioned after that inline element (like span, em ...), an easy fix is to consider inline elements as void tags and add them to voidNodeTags so they will be skipped.
    – medBouzid
    May 1, 2016 at 0:23
19

It's possible to do set cursor to the end through the range:

setCaretToEnd(target/*: HTMLDivElement*/) {
  const range = document.createRange();
  const sel = window.getSelection();
  range.selectNodeContents(target);
  range.collapse(false);
  sel.removeAllRanges();
  sel.addRange(range);
  target.focus();
  range.detach(); // optimization

  // set scroll to the end if multiline
  target.scrollTop = target.scrollHeight; 
}
4
  • Using the code above it does the trick - but I want to be able to then have the ability to move the cursor anywhere within the content editable div and continue typing from that point - e.g user has recognised a typo for instance... How would I amend your code above to this?
    – Zabs
    Feb 16, 2018 at 11:45
  • 2
    @Zabs it's fairly easy: do not invoke setCaretToEnd() each time - invoke it only when you need it: e.g. after Copy-Paste, or after restricting the message length.
    – am0wa
    Feb 21, 2018 at 10:15
  • This worked for me. after the user selects a tag, I move the cursor in the contenteditable div to the end.
    – Ayudh
    May 4, 2020 at 9:27
  • Nice solution that isn't from the stone ages like 99% of SO answers and isn't deprecated Oct 6, 2021 at 13:28
15

A shorter and readable version using only selection (without range):

function setEndOfContenteditable(elem) {
    let sel = window.getSelection();
    sel.selectAllChildren(elem);
    sel.collapseToEnd();
}
<p id="pdemo" contenteditable>
A paragraph <span id="txt1" style="background-color: #0903">span text node <i>span italic</i></span> a paragraph.
<p>

<button onclick="pdemo.focus(); setEndOfContenteditable(txt1)">set caret</button>

Quite useful: https://javascript.info/selection-range

6
  • 5
    Works flawlessly on chrome + firefox and multi-lines. Best solution.
    – T S
    Jul 8, 2022 at 15:13
  • 2
    Still work on chrome thanks Oct 5, 2022 at 13:54
  • 2
    It works on Firefox as well. Thanks! May 10 at 5:57
  • 1
    @GeorgiGeorgiev I can't reproduce your issue with the snippet above (FF102). I guess, it is specific to your modification, rather my solution. A jsfiddle might help. May 10 at 7:11
  • 1
    neat and works perfectly, tks
    – Dan D.
    Jul 29 at 15:55
5

Moving cursor to the end of editable span in response to focus event:

  moveCursorToEnd(el){
    if(el.innerText && document.createRange)
    {
      window.setTimeout(() =>
        {
          let selection = document.getSelection();
          let range = document.createRange();

          range.setStart(el.childNodes[0],el.innerText.length);
          range.collapse(true);
          selection.removeAllRanges();
          selection.addRange(range);
        }
      ,1);
    }
  }

And calling it in event handler (React here):

onFocus={(e) => this.moveCursorToEnd(e.target)}} 
3

I know this question already has an answer but I thought a simple one-liner might help future people who find this:

document.getSelection().modify("move", "forward", "documentboundary");

This gets the current selected element and moves the cursor forward (depending on language - right to ignore language) to the end of the document.

see here for more info on what you can do with Selections.

2
  • That’s super sweet and works. Note that Firefox doesn’t support documentboundary for modify(), but lineboundary can do the trick on single-line elements.
    – dakab
    Oct 26 at 9:24
  • This crashes in Firefox with the NS_ERROR_NOT_IMPLEMENTED exception. Nov 17 at 16:41
1

I had a similar problem trying to make a element editable. It was possible in Chrome and FireFox but in FireFox the caret either went to the beginning of the input or it went one space after the end of the input. Very confusing to the end-user I think, trying to edit the content.

I found no solution trying several things. Only thing that worked for me was to "go around the problem" by putting a plain old text-input INSIDE my . Now it works. Seems like "content-editable" is still bleeding edge tech, which may or may not work as you would like it to work, depending on the context.

1
  • 1
    It's probably dangerous, and i'm sure someone will come along to scold me, but you can append a nullbyte \0 to the end of the textNode.textContent and then will be able to call range.setStart(textNode,textNode.textContent.length), and it works. it even works when the last character is a space, and also then will keep firefox from collapsing the whitespace in an inline element, like a span.
    – r3wt
    Oct 22 at 6:31
1

The problem with contenteditable <div> and <span> is resolved when you start typing in it initially. One workaround for this could be triggering a focus event on your div element and on that function, clear, and refill what was already in the div element. This way the problem is resolved and finally you can place the cursor at the end using range and selection. Worked for me.

  moveCursorToEnd(e : any) {
    let placeholderText = e.target.innerText;
    e.target.innerText = '';
    e.target.innerText = placeholderText;

    if(e.target.innerText && document.createRange)
    {
      let range = document.createRange();
      let selection = window.getSelection();
      range.selectNodeContents(e.target);
      range.setStart(e.target.firstChild,e.target.innerText.length);
      range.setEnd(e.target.firstChild,e.target.innerText.length);
      selection.removeAllRanges();
      selection.addRange(range);
    }
  }

In HTML code:

<div contentEditable="true" (focus)="moveCursorToEnd($event)"></div>

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.