Highlighting Selecting text on element with JavascriptJQuery for mobile web (android, iOS, Windows Phone) - Stack Overflow

admin管理员组

文章数量:1430377

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 e up.

Attempt 1: /

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

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 e 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 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 e w/ flash installed on them.

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

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 e up.

Attempt 1: http://jsfiddle/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/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 e 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 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 e w/ flash installed on them.

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

• javascript
• jquery
• selection
• mobile-website
• textselection

Share Improve this question Follow edited May 23, 2017 at 10:28 CommunityBot 111 silver badge asked Feb 20, 2013 at 7:59 OneezyOneezy 5,02377 gold badges4949 silver badges7575 bronze badges 9

• Have you tried calling the select() method of the input? var input = $("input")[0]; input.focus(); input.select(); – Tim Down Commented Feb 20, 2013 at 9:25
• 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". – Oneezy Commented Feb 20, 2013 at 11:35
• 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? – Tim Down Commented Feb 20, 2013 at 11:51
• 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. – Oneezy Commented Feb 20, 2013 at 12:00
• 1 The second parameter of document.execCommand determines whether the default user interface should be shown. developer.mozilla/es/docs/Web/API/Document.execCommand – Arley Triana Morin Commented Sep 27, 2014 at 15:30

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 3

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

本文标签：