How to move cursor to end of contenteditable entity

Question

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.

Answer 1

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

Answer 2

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