selectionStart and selectionEnd in contenteditable element
Solution 1
Try this, it returns the selected text, no matter if it's contentEditable or not.
function GetSelectedText() {
if (document.getSelection) { // all browsers, except IE before version 9
var sel = document.getSelection();
// sel is a string in Firefox and Opera,
// and a selectionRange object in Google Chrome, Safari and IE from version 9
// the alert method displays the result of the toString method of the passed object
alert(sel);
}
else {
if (document.selection) { // Internet Explorer before version 9
var textRange = document.selection.createRange();
alert(textRange.text);
}
}
}
<div>Test Example Microsoft T-shirt box</div>
<button onClick="GetSelectedText()">Get text</button>
I make this example in jsfiddler, see that enter link description here
Solution 2
Use Selection object from getSelection() method to get baseOffset
and extentOffset
of contentEditable elements
var sel = document.getSelection();
node.value = node.value.slice(0, sel.baseOffset - step) + value + node.value.slice(sel.extentOffset);
Solution 3
This answer uses Selection#modify, which is non-standard, but at least, I suggest you to use "insertText" command:
function replaceVal(val, step) {
var selection = window.getSelection();
for (var i = 0; i < step; i += 1) {
selection.modify('extend', 'backward', 'character');
}
document.execCommand('insertText', false, val);
}
<label for="editable">Editable:</label>
<div contenteditable="true" id="editable">Test test test</div>
<label for="step">Step:</label>
<input type="number" id="step" name="step" min="0" step="1" value="0" />
<button onClick="replaceVal('insertion', Number(document.getElementById('step').value))">Get text</button>
![Semytech](https://i.stack.imgur.com/BGCSC.jpg?s=256&g=1)
Semytech
Updated on November 04, 2021Comments
-
Semytech over 2 years
I have been struggling the selectionStart and selectionEnd attributes of textarea to make them work with contenteditable div element. I have checked a lot of related articles on google and on SO but to no avail. I have something similar to the following which is working for textarea perfectly. But I want this one to work with contenteditable div.
function replaceVal(node, val, step){ //... var cursorLoc = node.selectionStart; node.value = node.value.substring(0, node.selectionStart - step) + value + node.value.substring(node.selectionEnd, node.value.length); node.scrollTop = scrollTop; node.selectionStart = cursorLoc + value.length - step; node.selectionEnd = cursorLoc + value.length - step; //... }
How can this be modified so that it will work with contenteditable div element instead of textarea?