使用 Javascript/JQuery 为移动网络（Android、iOS、Windows Phone）突出显示/选择元素上的文本

Posted 2023-03-06

【中文标题】使用 Javascript/JQuery 为移动网络（Android、iOS、Windows Phone）突出显示/选择元素上的文本

【英文标题】：Highlighting/ Selecting text on element with Javascript/JQuery for mobile web (android, iOS, Windows Phone)

【发布时间】：2013-02-05 03:53:13

【问题描述】：

我正在尝试通过允许用户单击/触摸某个元素并自动“选择/突出显示该元素内的文本。

✔ 我想要发生的事情：

点击输入元素和“全选”文本。 按住突出显示的文本允许“复制或剪切”原生选项出现。

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

✖实际发生了什么：

单击输入元素和“全选”文本。 （正确） 按住突出显示的文本并出现“选择单词”和“全选”原生选项。 （不正确）

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

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

。 .

▼ 尝试失败

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

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

遵循 *** 问题中的指南：Selecting text in mobile Safari on iPhone

【问题讨论】：

你试过调用输入的select()方法吗？ var input = $("input")[0]; input.focus(); input.select();

感谢您的回复蒂姆，我最终尝试了这个：$("input").click(function() $(this).focus(); $(this).select (););似乎和其他人做同样的事情......它会选择所有文本（就像它应该做的那样），当我按住它时，它会提示我是否要“选择单词”或“选择全部”。

嗯嗯。我对此并不抱太大希望。顺便说一句，如果用户手动选择输入文本，你会得到你想要的行为吗？

是的，在手机上选择很标准：按住word，然后选择“Select Word”或“Select All”选项，然后再次按住word，选择“剪切，复制，或粘贴”。这样就可以了。

document.execCommand 的第二个参数决定是否显示默认用户界面。 developer.mozilla.org/es/docs/Web/API/Document.execCommand

【参考方案1】：

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