Highlighting/ Selecting text on element with Javascript/JQuery for mobile web (android, iOS, Windows Phone)

Question

I'm attempting to speed up the process for "copying and pasting" text in ALL mobile web browsers (Android, iOS, and Windows Phone) by allowing a user to click/touch an element and it will auto "select/highlight" the text inside that element. ✔ What I Want to Happen: - Click on input element and "Select All" text. - Hold down on highlighted text allowing the "Copy or Cut" native options to come up. Attempt 1: http://jsfiddle.net/w3R6u/2/ ``` HTML JQUERY $("input").click(function () { window.document.execCommand('SelectAll', true); }); ``` .. Attempt 2: http://jsfiddle.net/w3R6u/4/ ``` HTML JQUERY $("input").click(function () { this.selectionStart=0; this.selectionEnd=this.value.length; return false; }); ``` ✖ Whats Actually Happening: - Click on input element and "Select All" text. (Correct) - Hold down on highlighte…

Accepted Answer

I believe you have to use ranges to make a selection. The following is vanilla javascript, which will work with jquery, but may need some jquery massaging.

```
 function selectAll(e) {
   var elem = e.target;

   var start = 0;
   var end = elem.value.length;

   if (elem.createTextRange) {
     var selRange = elem.createTextRange();
     selRange.collapse(true);
     selRange.moveStart('character', start);
     selRange.moveEnd('character', end);
     selRange.select();
     elem.focus();
   } else if (elem.setSelectionRange) {
     elem.focus();
     elem.setSelectionRange(start, end);
   } else if (typeof elem.selectionStart != 'undefined') {
     elem.selectionStart = start;
     elem.selectionEnd = end;
     elem.focus();
   }
 }


 var elem = document.getElementById("myField");
 elem.onclick = selectAll;
```

```
<input id="myField" value="this is the text in there" />
```

Highlighting/ Selecting text on element with Javascript/JQuery for mobile web (android, iOS, Windows Phone)

Solution

Problem

Related problems