StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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:</p> <pre><code>//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); </code></pre> <p>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:</p> <pre><code>//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); </code></pre> <p>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.</p> <pre><code>//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); </code></pre> <p><strong>A few important notes:</strong></p> <ol> <li>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.</li> <li>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.</li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload