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

原创 2014年10月24日 20:16:53

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

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

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

2)借助selection和range的方法需要考虑到不同浏览器的兼容性,代码如下:
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");
  }
}


遗憾的是在iphone Safari上依然无法通过点击或长按高亮选中所有文本(既然也支持window.getSelection,为何在Safari浏览器addRange操作后文本不能默认选中,知道原因的请留言指教)。因此,该方式存在缺陷。主动选中文本区域的方法后面后附上。

3)iPhone用户可能知道,长按某一文本选区内文字周围的空白区域,Safari会自动将该选区内的文本高亮全选(目标文本需要放在独立的div块级容器内)。根据这一特性,用CSS margin修饰一下,利用这个特点,正好可以解决上述第二种方法在ios设备的不兼容。经过测试,无论安卓和ios平台,一般手机自带的系统浏览器都是可以兼容的。至于uc浏览器、百度浏览器等其他厂家的移动端产品,由于有不同的机制,只能使用这些浏览器菜单提供的“自由复制”功能。

所以,我综合了第二种和第三种方式,使用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>

JavaScript代码:

	<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;
}

说明:这里的margin:2em正是为了实现Safari浏览器上的长按全选功能,为了尊重还原设计稿效果,父容器.cparea又使用了负边距来抵消这个2em的外边距。最终,不仅视觉上和设计图保持了一致,也实现了长按全选激发系统菜单。


最后再补充一下支持Safari下的完整方法:

	$("#kwd").bind("taphold", function(){
	    var doc = document, 
	    	text = doc.getElementById("kwd"),
	    	range, 
	    	selection;
	    if (doc.body.createTextRange) {	//IE
	        range = document.body.createTextRange();
	        range.moveToElementText(text);
	        range.select();

	    } else if (window.getSelection) {	//FF CH SF
	        selection = window.getSelection();        
	        range = document.createRange();
	        range.selectNodeContents(text);
	        selection.removeAllRanges();
	        selection.addRange(range);

	        //测试
	        console.log(text.textContent);
	        text.innerText && console.log(text.innerText);	//FireFox不支持innerText
	        console.log(text.textContent.length);
	        text.innerText && console.log(text.innerText.length);	//在Chrome下长度比IE/FF下多1
	        console.log(text.firstChild.textContent.length);
	        text.innerText && console.log(text.firstChild.innerText.length);
	        console.log(text.firstChild.innerHTML.length);

	        //注意IE9-不支持textContent
	        makeSelection(0, text.firstChild.textContent.length, 0, text.firstChild);
        	/*
			if(selection.setBaseAndExtent){
	        	selection.selectAllChildren(text);
	        	selection.setBaseAndExtent(text, 0, text, 4);
	        }
	        */
	    }else{
	    	alert("浏览器不支持长按复制功能");
	    }
	
	});
	function makeSelection(start, end, child, parent) {
		var range = document.createRange();
		//console.log(parent.childNodes[child]);
		range.setStart(parent.childNodes[child], start);
		range.setEnd(parent.childNodes[child], end);

		var sel = window.getSelection();
		sel.removeAllRanges();
		sel.addRange(range); 
	}


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



webview 长按选择复制

1.首先在h5中加入 head> style> .unselectable { -moz-user-select: none; ...
  • kaiqiangzhang001
  • kaiqiangzhang001
  • 2016年03月01日 16:03
  • 5609

手机端长按文字复制功能

遇到的问题 解决方案 关于user-select 语法 取值 说明 兼容性 自我检讨遇到的问题微信上要实现一个点击复制兑换码的功能,上网找了很久,找到了zero clipboard插件只能在PC端用,...
  • yuzhongzi81
  • yuzhongzi81
  • 2016年06月28日 17:18
  • 9697

HTML5对手机页面长按会粘贴复制禁用的解决方法(常用)

一、完全兼容ios和安卓的写法 1、用a标签包起来,在a标签里面加一句代码ontouchstart = "return false;" 二、只兼容ios的写法 *{ -we...
  • js_admin
  • js_admin
  • 2017年05月08日 16:17
  • 3776

HTML5[5]:在移动端禁用长按选中文本功能

在手机浏览器中,长按可选中文本,但如果在应用中,会给人一种异样的感觉,最好还是禁用此功能为上。 * { -webkit-touch-callout:none; -webkit-user-select...
  • baidu_31333625
  • baidu_31333625
  • 2017年04月14日 11:14
  • 583

JavaScript+Html5实现按钮的复制文字到剪切板功能,手机网页兼容

JavaScript+Html5实现按钮的复制文字到剪切板功能,手机网页兼容
  • pang1026
  • pang1026
  • 2017年03月23日 15:35
  • 9224

移动端h5长按删除效果

粘贴到html即可看到效果,用于移动端长按删除 删除 // 长按 $.fn.longPress = function(fn) { var timeout = un...
  • zyz_3362
  • zyz_3362
  • 2016年09月05日 18:22
  • 5527

移动H5页面CSS 样式控制,禁止页面文本复制代码

*{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器...
  • China_Guanq
  • China_Guanq
  • 2017年08月15日 13:24
  • 637

html5 在移动端禁止页面缩放和选中复制

最近在开发过程中,遇到客户提出移动端禁止页面缩放和禁止长按选中复制等属性,除在安卓/ios原生中加入相应权限外,html5页面也可以作相应的设置。 这句是用来禁止页面缩放。 .nocopy ...
  • wind4444
  • wind4444
  • 2015年11月20日 10:01
  • 4615

JS 实现复制粘贴功能

JS 实现复制粘贴功能目前没有做过多的测试,只是测试了几个手机,介绍:支持情况(1)移动端: chrome(版本 58.0.3029.96 (64-bit))、 猎豹(V6.0.114.14559)、...
  • qq_16559905
  • qq_16559905
  • 2017年05月24日 16:11
  • 2842

移动端复制按钮(点击复制,clipboard.js)

移动端复制按钮实现,clipboard.js
  • Tomhs3000
  • Tomhs3000
  • 2017年09月22日 09:42
  • 941
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:移动端html5页面长按实现高亮全选文本内容的兼容解决方案
举报原因:
原因补充:

(最多只允许输入30个字)