How to select all text in contenteditable div?

Question

Before this is flagged as a duplicate, I want you to realize that no one has actually provided a good answer for this specific question. In select all text in contenteditable div when it focus/click, the accepted answer and Tim Down's answer are both not helpful, as they only work when the element is already focused. In my case, I want all the text in the contenteditable div to be selected after the click of a button, even if the div was not focused beforehand.

How could I do this?

score 59 · Accepted Answer · edited May 23 '17 at 12:09

59

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.

edited May 23 '17 at 12:09

Community

1
1

answered Sep 03 '12 at 08:53

Tom Oakley

6,065
11
44
73

What's the browser compatibility on this? – crush Dec 20 '13 at 18:39
Fiddle works in FF 28, but doesn't work in for `contenteditable` input-elements with OS theme (CSS `appearance`). You may wanna add `element.focus();` to the `selectText()` function, or it will select the text without the cursor being in that field. – CodeManX May 01 '14 at 22:59
Just a suggestion, remove the line "console.log(this, element);", since it's not required to work. – Wagner Bertolini Junior Oct 24 '16 at 19:07

score 13 · Answer 2 · edited Jul 08 '15 at 13:21

13

For example in next scenario if user set focus into editable div (with mouse, keyboard or by clicking a button) then content of editable div is selected.

<div id="editable" style=" border:solid 1px #D31444" contenteditable="true" 
    onfocus="document.execCommand('selectAll', false, null);">
  12 some text...
</div>
    
<button onclick="document.getElementById('editable').focus();" >Click me</button>

On JSFiddle: http://jsfiddle.net/QKUZz/

edited Jul 08 '15 at 13:21

Dan Dascalescu

143,271
52
317
404

answered Sep 03 '12 at 08:18

Andrew D.

8,130
3
21
23

@think123, see link in updated answer. Why not `document.execCommand`? Another way (I think) required to use `selection` and `range` objects. – Andrew D. Sep 03 '12 at 08:40
Would you be able to update it and add that as a functionality? Thanks. – Lucas Sep 03 '12 at 08:40
2

why does selectAll selects everything in the document? :( – Kim Honoridez Feb 16 '15 at 04:03
1

This doesn't work reliably in Chrome 43. Please see the [issue I filed about it](https://code.google.com/p/chromium/issues/detail?id=508081). – Dan Dascalescu Jul 08 '15 at 13:20

score 4 · Answer 3 · answered Jun 04 '15 at 23:56

Great function.

I've adapted it to enable full selection of text across any number of editable divs via a class, whether clicked directly, or tabbed to:

$.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);
    }
};

$(".editable").on("focus", function () {
    $(this).selectText();
});
$(".editable").on("click", function () {
    $(this).selectText();
});
$('.editable').mouseup(function(e){
    e.stopPropagation();
    e.preventDefault();
    // maximize browser compatability
    e.returnValue = false;
    e.cancelBubble = true;
    return false; 
});

HTML:

<div class="editable" style="border:dotted 1px #ccc;" contenteditable="true">01 text...</div>
<div class="editable" style="border:dotted 1px #ccc;" contenteditable="true">02 text...</div>
<div class="editable" style="border:dotted 1px #ccc;" contenteditable="true">03 text...</div>

FIDDLE:

http://jsfiddle.net/tw9jwjbv/

Great function, saved my life. I added `$("#mybutton").click(function () { $("#mydiv").selectText(); document.execCommand("copy");` which copy content of the DIV to clipboard. — Matt, Nov 21 '17 at 14:51

Henry Ruhs · Answer 4 · 2020-07-02T21:41:25.973

3

Chrome does select everything, so I just added RAF to work around it:

requestAnimationFrame(() => document.execCommand('selectAll'));

Demo: http://jsfiddle.net/0aqptw8m/

edited Jul 02 '20 at 21:41

answered Oct 22 '18 at 09:45

Henry Ruhs

1,533
1
20
32

score 2 · Answer 5 · answered Sep 03 '12 at 08:07

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

Judging by this answer provided in the link, cant you use the code on click within your button.

What im saying is even say in the div onfocus="document.execCommand('selectAll',false,null)"

Then use jQuery to trigger focus $('#test').focus();

How to select all text in contenteditable div?

5 Answers5

Linked