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:

1. Click on input element and "Select All" text.
2. Hold down on highlighted text allowing the "Copy or Cut" native options to come up.

Attempt 1: http://jsfiddle.net/w3R6u/2/

HTML
<input type="text" value="This text will be selected when you click in this input" />

JQUERY
$("input").click(function () {
  window.document.execCommand('SelectAll', true);
});

..

Attempt 2: http://jsfiddle.net/w3R6u/4/

HTML
<input type="text" value="This text will be selected when you click in this input" />

JQUERY
$("input").click(function () {
   this.selectionStart=0; 
   this.selectionEnd=this.value.length;
   return false;
 });

✖ Whats Actually Happening:

1. Click on input element and "Select All" text. (Correct)
2. Hold down on highlighted text and "Select Word" and "Select All" native options come up. (Incorrect)

The above 2 attempts will do (Step 1) like God naturally intended them to do, yes... But with my testing on an Android device I've found that when "holding down" on an element (step 2), it will prompt the user to "Select Word" or "Select All".. Completely ignoring the FACT that the text is already selected!! The proper thing to do would be to have the native "Copy" or "Cut" options for the user appear because the text is already selected.

Does anyone know why this problem exists and how to fix it?

. .

▼ Failed Attempts

1. My first attempt was of course, finding a "Copy and Paste" javascript solution. Though the W3.org is working on the Clipboard API and Events (February 2013), it is just a work in progress. You can use the getData and setData methods and it will work in IE, but that doesn't help me.

2. Their are flash workarounds like "ZeroClipBoard" and "zClip" but these do not work either because mobile phone don't come w/ flash installed on them.

3. Following the guidelines in this StackOverflow question: Selecting text in mobile Safari on iPhone

Freemason

Have you tried calling the select() method of the input? var input = $("input")[0]; input.focus(); input.select(); – Tatting

Thanks for you're reply Tim, I ended up trying this: $("input").click(function(){ $(this).focus(); $(this).select(); }); Seems to be doing the same thing as the others.... It will select all of the text (like its supposed to) and when I hold finger down on it, it prompts me if I want to "Select Word" or "Select All". – Freemason

Ah well. I wasn't very hopeful about it. Do you get the behaviour you want if the user selects the input text by hand, by the way? – Tatting

Yes, pretty standard for selection on mobile phones: Hold down on word, then choose options of "Select Word" or "Select All", Then hold down on word again, choose "Cut, Copy, or Paste". That will work perfectly fine. – Freemason

My mission was to speed that process up by letting the user simply click on an element (it could be a <li> tag, or input tag) and it would select the text/ highlight the text.... and then the user could go about his normal routine of holding down and copying it. You know what I did notice though was upon selecting the text via javascript's select() and selecting the text manually (holding finger down) I get the little carrots to drag around... when I don't get them by using select(). For some reason the phone doesn't recognize what I'm trying to do w/ the select() method – Freemason

Is it safe to say this is an OS issue because of its native select, copy, and paste?? – Freemason

It certainly sounds like it. It's an area I need to look into. – Tatting

Hi Tim, have you explored this any further? – Freemason

The second parameter of document.execCommand determines whether the default user interface should be shown. developer.mozilla.org/es/docs/Web/API/Document.execCommand – Zilpah

Answer 1

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" />

Openandshut