To select all text inside an element such as DIV, we can simply use JavaScript document.createRange() method to create a range, and than using range.selectNodeContents() we can set node range (start and end), after which use selection.addRange() to select the range of the element.
This JavaScript code does its primary function which is to select all the text inside an element, but we don’t want it annoyingly select everything every-time element is clicked. We also want the user to be able to select portion of the text whenever needed.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | function selectText(id){ var sel, range; var el = document.getElementById(id); //get element id if (window.getSelection && document.createRange) { //Browser compatibility sel = window.getSelection(); if(sel.toString() == ''){ //no text selection window.setTimeout(function(){ range = document.createRange(); //range object range.selectNodeContents(el); //sets Range sel.removeAllRanges(); //remove all ranges from selection sel.addRange(range);//add Range to a Selection. },1); } }else if (document.selection) { //older ie sel = document.selection.createRange(); if(sel.text == ''){ //no text selection range = document.body.createTextRange();//Creates TextRange object range.moveToElementText(el);//sets Range range.select(); //make selection. } } } |
Usage :
1 2 3 | <div onclick="selectText(this.id)" id="elementID"> //Text </div> |
If you want to use it as jQuery code, just put the code inside jQuery “mouseup” event method, something like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | $("#elementID").on('mouseup', function() { var sel, range; var el = $(this)[0]; if (window.getSelection && document.createRange) { //Browser compatibility sel = window.getSelection(); if(sel.toString() == ''){ //no text selection window.setTimeout(function(){ range = document.createRange(); //range object range.selectNodeContents(el); //sets Range sel.removeAllRanges(); //remove all ranges from selection sel.addRange(range);//add Range to a Selection. },1); } }else if (document.selection) { //older ie sel = document.selection.createRange(); if(sel.text == ''){ //no text selection range = document.body.createTextRange();//Creates TextRange object range.moveToElementText(el);//sets Range range.select(); //make selection. } } }); |
Your HTML:
1 2 3 | <textarea id="elementID"> //Some text here </textarea> |
Click box below the select all text inside the box.
Thanks a lot for this coding snippet. I’d to search a lot to find out a solution for a custom vs. all text selection inside a pre element. And finally, here I got that magic solution.
ReplyYup… me too… THUMBS UP. I was able to use this in my text editor… click once to engage editor on DIV of text, shift click to select all the text. Saved me a bunch of time. Thank you.
ReplyOh Thanks , u saved me a lot of time
ReplyJust a thumbs up since nobody else has done so. Works like a charm and saved me a lot of time trying to make this from scratch. Would copy and paste again, 10/10.
Reply