selectionStart and selectionEnd in contenteditable element

Question

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?

Answer 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