使用Javascript / JQuery for mobile web突出显示/选择元素上的文本（android，iOS，Windows Phone）

Question

我试图加快所有移动网络浏览器（Android，iOS和Windows Phone）中“复制和粘贴”文本的过程，允许用户点击/触摸一个元素，它将自动“选择/突出显示”该元素内的文本。

✔我想要发生的事情：

1. 单击输入元素和“全选”文本。
2. 按住突出显示的文本，可以显示“复制或剪切” 本机选项。

尝试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);
});

..

尝试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;
 });

✖实际发生的事情：

1. 单击输入元素和“全选”文本。 （正确）
2. 按住突出显示的文本，出现“选择单词”和“全选” 本机选项。 （不正确的）

上面的两次尝试将像上帝自然希望他们那样做（步骤1） ，是的......但是我在Android设备上测试时发现当“按住”一个元素时（步骤2） ，它将会提示用户“选择单词”或“全选”。完全忽略文本已被选中的事实!! 正确的做法是为用户显示本机“复制”或“剪切”选项，因为文本已被选中。

有谁知道为什么这个问题存在以及如何解决它？

。 。

▼尝试失败

1. 我的第一次尝试当然是找到一个“复制并粘贴”的JavaScript解决方案。 虽然W3.org正在开发剪贴板API和事件 （2013年2月），但这只是一项正在进行中的工作。 你可以使用getData和setData方法，它可以在IE中工作 ，但这对我没有帮助。

2. 他们是像“ ZeroClipBoard ”和“ zClip ”这样的闪存解决方案，但这些都不起作用，因为手机没有安装闪存。

3. 遵循此StackOverflow问题中的准则： 在iPhone上的移动Safari中选择文本

Answer 1

我相信你必须使用范围进行选择。 以下是vanilla javascript，它将与jquery一起使用，但可能需要一些jquery按摩。

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