How to Select All Text in Contenteditable Div

select all text in contenteditable div when it focus/click

Try this:

<div style="border:solid 1px #D31444"
     contenteditable="true"
     onclick="document.execCommand('selectAll',false,null)">12 some text...</div>

Update: Note that document.execCommand is now deprecated although it still works.

How to select all text in contenteditable div?

I used some code from this thread to come up with my answer. It's 100% jQuery as you asked for as well. Hope you like it :)

jQuery.fn.selectText = function(){
   var doc = document;
   var element = this[0];
   console.log(this, element);
   if (doc.body.createTextRange) {
       var range = document.body.createTextRange();
       range.moveToElementText(element);
       range.select();
   } else if (window.getSelection) {
       var selection = window.getSelection();        
       var range = document.createRange();
       range.selectNodeContents(element);
       selection.removeAllRanges();
       selection.addRange(range);
   }
};

$("button").click(function() {
    $("#editable").selectText();
});

jsfiddle link.

Programmatically select text in a contenteditable HTML element?

If you want to select all the content of an element (contenteditable or not) in Chrome, here's how. This will also work in Firefox, Safari 3+, Opera 9+ (possibly earlier versions too) and IE 9. You can also create selections down to the character level. The APIs you need are DOM Range (current spec is DOM Level 2, see also MDN) and Selection, which is being specified as part of a new Range spec (MDN docs).

function selectElementContents(el) {
    var range = document.createRange();
    range.selectNodeContents(el);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}

var el = document.getElementById("foo");
selectElementContents(el);

How to select text of the two elements with contentEditable = true?

You can wrap these <div>s inside another <div> and make it contentEditable="true" instead of these two.

<body>
  <div contentEditable="true">
    <div style="position:absolute; left: 10px; top:10px; width:100px; height:200px; border: 3px solid #73AD21;">
Donec tempus, nisi a pharetra placerat, diam nisi aliquam elit, a consectetur magna enim sed ligula.</div>
    <div style="position:absolute; left: 130px; top:10px; width:100px; height:200px; border: 3px solid #73AD21;">
The oldest browsers support only one way of registering event handlers, the way invented by Netscape.</div>
  </div>
</body>

JS Bin here.

Contenteditable div with selectAll on focus not working entirely

Execute command after element is focused, not on focus. To delay it, you can use a timeout, this will put callback in event queue, executing it after element is focused.

Your code should be (without using any inline script but jQuery as tagged in question):

$('div[contenteditable]').on('focus', function() {  setTimeout(function() {    document.execCommand('selectAll', false, null)  }, 0);})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div contenteditable>Something</div><div contenteditable>Something New</div>

How to select text range within a contenteditable div that has no child nodes?

But mine don't have any children. Just the text within the div.

The text within the div is a child – it's a text node. That's what you want to target.

You will also need to trim its nodeValue to get the proper offset. Otherwise, the leading spaces will be included.

This seems to do what you want:

function SelectText(obj, start, stop) {  var mainDiv = $(obj)[0],      startNode = mainDiv.childNodes[0],      endNode = mainDiv.childNodes[0];
  startNode.nodeValue = startNode.nodeValue.trim();  var range = document.createRange();  range.setStart(startNode, start);  range.setEnd(endNode, stop + 1);  var sel = window.getSelection();  sel.removeAllRanges();  sel.addRange(range);} //SelectText
$('#main').focus();
SelectText('#main', 6, 10);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="main" contenteditable="true">  Hello World</div>

make the cursor select whole content of the contenteditable td on click in jquery

Hope this helps:

$('#selectAll').on('focus', function() {  var cell = this;  var range, selection;  if (document.body.createTextRange) {    range = document.body.createTextRange();    range.moveToElementText(cell);    range.select();  } else if (window.getSelection) {    selection = window.getSelection();    range = document.createRange();    range.selectNodeContents(cell);    selection.removeAllRanges();    selection.addRange(range);  }});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tr>  <td><div id="selectAll" contenteditable="true">0.00</div></td></tr>