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

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