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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

尝试了一些做法。在安卓/iOS平台上的兼容性都不是非常好。在微信浏览器内是非常easy实现长按文本激发系统菜单。高亮全选文本内容的。

可是在其它浏览器的表现就不是非常一致了。

包含模拟focus input。JavaScript Selection, 使用a标签尝试激活系统菜单。

这些方法都存在兼容的缺陷。

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

2）借助selection和range的方法须要考虑到不同浏览器的兼容性，代码例如以下：

遗憾的是在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代码：

关键的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);
}