移动端html5页面长按实现高亮全选文本内容的兼容解决方案

最近需要给html5的WebAPP在页面上实现一个复制功能：用户点击长按文本会全选文字并弹出系统“复制”菜单，用户可以点击“复制”进行复制操作，然后粘贴到AppStore搜索对应的应用。之所以不是采用链接形式直接跳转到AppStore对应应用是为了通过用户的主动输入关键词搜索给推广的企业App增加权重。所以这一个“复制”功能对用户的体验至关重要。

尝试了一些做法，在安卓/iOS平台上的兼容性都不是很好。在微信浏览器内是很容易实现长按文本激发系统菜单，高亮全选文本内容的。但是在其他浏览器的表现就不是很一致了。包括模拟focus input，JavaScript Selection, 使用a标签尝试激活系统菜单。这些方法都存在兼容的缺陷。

1）虽然使用带有href属性的a标签在uc浏览器和百度浏览器上长按文本会出现“自由复制”/“选择文本”菜单，选择该菜单后会出现“全选/复制”的菜单，但是在一些安卓手机的系统浏览器和iPhone中却被视为纯链接，只弹出“复制链接”，没有“复制文本”菜单。况且即使只考虑少部分浏览器可行，这样也给用户操作多了一步，增加了复杂度。所以该方案不可取。

function selectText(element) {
  var doc = document,
      text = doc.getElementById(element),
      range,
      selection;

  if (doc.body.createTextRange) {
      range = document.body.createTextRange();
      range.moveToElementText(text);
      range.select();
  } else if (window.getSelection) {
      selection = window.getSelection();        
      range = document.createRange();
      range.selectNodeContents(text);
      selection.removeAllRanges();
      selection.addRange(range);
      /*if(selection.setBaseAndExtent){
          selection.setBaseAndExtent(text, 0, text, 1);
      }*/
  }else{
      alert("none");
  }
}

所以，我综合了第二种和第三种方式，使用jquery mobile中的taphold事件来模拟longtap操作激发手机系统的复制菜单，这样基本上可以做到在所有移动设备浏览器上都能实现长按文本区域来高亮选中所有文本内容。再提一句，taphold的兼容bug这里就不详细附解决方法了，如果你的项目要求精益求精，你可以自行搜索解决方案。

下面列出我的解决方案。具体代码如下：

HTML代码：

			<div class=" para requirement">
				<div class="tips tips-t">
					1、必须首次下载才生效<br/>
					2、不能从排行榜下载哦
				</div>
				<div class="cparea">
					<div class="kwd" id="kwd"><span>三国艳义手机优化大师</span></div>					
				</div>
				<div class="cparea">
					<span class="kdes"><b>★</b>长按虚线框,拷贝关键词</span>
				</div>
				<a href="https://itunes.apple.com/cn/" data-role="button" class="downlink">去AppStore搜索下载</a>
			</div>

	<script type="text/javascript">

	$("#kwd").bind("taphold", function(){ //不支持iPhone/iTouch/iPad Safari
	    var doc = document, 
	    	text = doc.getElementById("kwd"),
	    	range, 
	    	selection;
	    if (doc.body.createTextRange) {
	        range = document.body.createTextRange();
	        range.moveToElementText(text);
	        range.select();
	    } else if (window.getSelection) {
	        selection = window.getSelection();        
	        range = document.createRange();
	        range.selectNodeContents(text);
	        selection.removeAllRanges();
	        selection.addRange(range); 
	    }else{
	    	alert("浏览器不支持长按复制功能");
	    }		
	});

	</script>

关键的CSS代码：

.cparea{
	text-align: center;
	font-family: Microsoft Yahei;
	margin: -2em 0 0;
}
.kwd{
	display: inline-block;
	color: #272727;
	background-color: #fff;
	font-size: 1.1875em;
	font-size: 1.1875em;
	padding: .75em 1em;
	border: 1px dashed #e60012;
	-webkit-user-select:element; 
	margin: 2em;
}
.kwd span{
	display: block; 
	border: 1px solid #fff;
}
.kdes{
	display: inline-block;
	color: #212121;
	font-size: .875em;
	padding-top: 0;
}
.kdes b{
	color: #ed5353;
	font-size: 1.25em;
	padding-right: .1em;
}

转载请注明来自于CSDN freshlover的空间。