10

我试图通过允许用户单击/触摸一个元素来加快所有移动网络浏览器（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. 按住突出显示的文本，然后出现“选择单词”和“全选”本机选项。（不正确）

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

有谁知道为什么会出现这个问题以及如何解决它？

. .

▼ 失败的尝试

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

  2. 它们是诸如“ ZeroClipBoard ”和“ zClip ”之类的闪存解决方法，但它们也不起作用，因为手机上没有安装闪存。

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

4

1 回答 1

2

我相信您必须使用范围来进行选择。以下是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" />

于 2015-10-18T06:31:38.533 回答