How do I select (get range or selection object) an element in a contenteditable div if I know the element ID?
I have this contenteditable element:
<div id="editMe" contenteditable="true"> There is some text here. <span id="selectThisText">This is the target text.</span> And some here. </div>
Thanks in advance!
Create a range and use its
var span = document.getElementById("selectThisText"); var range = document.createRange(); range.selectNodeContents(span);
This doesn't work in IE <= 8, which doesn't support DOM Range. However, this is one case which is just as easy in old IE:
var span = document.getElementById("selectThisText"); var textRange = document.body.createTextRange(); textRange.moveToElementText(span);
//get Selection var selection = window.getSelection(); //get Range var range = selection.getRangeAt(0); //where the range selection happens.
Selection.containsNode(), Check the Browser compatibility table carefully before using this in When false , containsNode() only returns true when the entire node is part This snippet checks whether anything inside the body element is selected. p> <p>Hmm, where <span id="secret" style="color:transparent">SECRET</span> range = document.createRange(); referenceNode = document.getElementsByTagName("div"); range.selectNodeContents(referenceNode); Live sample. This example lets the user select and deselect a paragraph with buttons. Document.createRange(), Range.selectNodeContents(), and Selection.addRange() are used to select the content.
var text = $('#selectThisText').text();
Selecting an element inside an element with contenteditable="true", Bug 1318312 part.2 Mark Selection as "called by JS" when every Selection API the <div> does not get focused and the content is not immediately editable. Neil, you know, Gecko doesn't move focus on comment #0 and comment #1 case. Otherwise, e.g., one of the ranges is in non-editable element or Looks like there The HTMLInputElement.setSelectionRange() method sets the start and end positions of the current text selection in an input or textarea element. MDN will be in maintenance mode for a brief period, Wednesday July 1, from around 2:30 PM until no later than 4:00 PM Pacific Time (in UTC, Wednesday July 1, 9:30 PM to 11:00 PM).
HTML DOM contentEditable Property, Tip: You can also use the isContentEditable property to find out if the content of an element is editable or not. Browser Support. The numbers in the table specifies The Window.getSelection() method returns a Selection object representing the range of text selected by the user or the current position of the caret. Syntax selection = window.getSelection(); Return value. A Selection object. When cast to string, either by appending an empty string ("") or using Selection.toString(), this object returns the
How to set cursor position in content-editable element using , In order to set caret cursor position in content editable elements like div tag is click assign input value to range function to return cursor position on div. getSelection(); // Here 'selectobj' is created object for window // get selected or div id = "editable" contenteditable = "true" Check out this Author's contributed articles. I have a contenteditable div, it has some paragraphs in it. Assuming a situation, when I click the button "set caret position", the main div will focus, the caret will start at position number 8