Select All Text In Element on Click (JavaScript OR jQuery)
Written by Saran on April 21, 2014, Updated October 12, 2018JavaScript
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.JS
- 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.
}
}
}HTML
- 1
- 2
- 3
<div onclick="selectText(this.id)" id="elementID">
//Text
</div>jQuery
If you want to use it as jQuery code, just put the code inside jQuery "mouseup" event method, something like this:JQUERY
- 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.
}
}
});HTML
- 1
- 2
- 3
<textarea id="elementID">
//Some text here
</textarea>
