Move keyboard caret to the end of element with Rangy

Question

I have several a elements within a contenteditable div. How can I place the keyboard caret at the end of a specific element identified by id and later move it to the end of the div using Rangy?

Thanks in advance and any help appreciated.

Answer 1

To set the caret after a specific element, you'll want to create a range and apply that range to the browser's selection object, as follows:

//get the browser selection object - it may or may not have a selected range
var selectionn = rangy.getSelection();

//create a range object to set the caret positioning for
var range = rangy.createRange();

//get the node of the element you wish to put the caret after
var startNode = document.getElementById('YourTagID');

//set the caret after the node for this range
range.setStartAfter(startNode);
range.setEndAfter(startNode);

//apply this range to the selection object
selection.removeAllRanges();
selection.addRange(range);

At some point if you wish to move the caret then you'd do the same thing as above to move it after the 'DIV', although if you wish the selection range to go from after your 'A' tag to the after your 'DIV' tag then you'd do this:

//get the browser selection object - it may or may not have a selected range
var selectionn = rangy.getSelection();

//create a range object to set the caret positioning for
var range = rangy.createRange();

//get the nodes of the elements you wish to put the range between
var startNode = document.getElementById('YourTagID');
var endNode = document.getElementById('YourDivTagID');

//set the caret after the node for this range
range.setStartAfter(startNode);
range.setEndAfter(endNode);

//apply this range to the selection object
selection.removeAllRanges();
selection.addRange(range);

If you want your selection to be at the end of an element, but inside the element instead of after the element then you would do something like this.

//get the browser selection object - it may or may not have a selected range
var selectionn = rangy.getSelection();

//create a range object to set the caret positioning for
var range = rangy.createRange();

//get the nodes of the elements you wish to put the range between
var startNode = document.getElementById('YourTagID');
var endNode = document.getElementById('YourDivTagID');

//set the caret after the start node and at the end of the end node
//Note: the end is set using endNode.length when the node is of the text type
//and it is set using childNodes.length when the end node is of the element type
range.setStartAfter(startNode);
range.setEnd(endNode, endNode.length || endNode.childNodes.length);

//apply this range to the selection object
selection.removeAllRanges();
selection.addRange(range);

A few important notes:

1. You don't have to get the start or end nodes by ID, but you do have to get the Node objects themselves from the DOM in one way or another.
2. If you modify the DOM then you may be destroying your range objects in the process. That is why the second code block does the work of creating the range all over again instead of just referencing the existing range.