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

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

方方案案

最近需要给HTML5的WebAPP在页面上实现个复制功能：用户点击长按文本会全选文字并弹出系统“复制”菜单，用户可以点

击“复制”进行复制操作，然后粘贴到AppStore搜索对应的应用。之所以不是采用链接形式直接跳转到AppStore对应应用是为了

通过用户的主动输入关键词搜索给推广的企业App增加权重。所以这个“复制”功能对用户的体验至关重要。

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

本内容的。但是在其他浏览器的表现就不是很致了。包括模拟focusinput，JavaScriptSelection,使用a标签尝试激活系统菜

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

）虽然使用带有href属性的a标签在uc浏览器和百度浏览器上长按文本会出现“自由复制”/“选择文本”菜单，选择该菜单后会出

现“全选/复制”的菜单，但是在些安卓手机的系统浏览器和iPhone中却被视为纯链接，只弹出“复制链接”，没有“复制文本”菜

单。况且即使只考虑少部分浏览器可行，这样也给用户操作多了步，增加了复杂度。所以该方案不可取。

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

functionselectText(element){

vardoc=document,

text=docgetElementById(element),

range,

selection;

if(docbodycreateTextRange){

range=documentbodycreateTextRange();

rangemoveToElementText(text);

rangeselect();

}elseif(windowgetSelection){

selection=windowgetSelection();

range=documentcreateRange();

rangeselectNodeContents(text);

selectionremoveAllRanges();

selectionaddRange(range);

/*if(selectionsetBaseAndExtent){

selectionsetBaseAndExtent(text,0,text,);

}*/

}else{

alert(none);

}

}

遗憾的是在iphoneSafari上依然无法通过点击或长按高亮选中所有文本（既然也支持window.getSelection，为何在Safari浏览

器addRange操作后文本不能默认选中，知道原因的请留言指教）。因此，该方式存在缺陷。主动选中文本区域的方法后面后

附上。

3）iPhone用户可能知道，长按某文本选区内文字周围的空白区域，Safari会自动将该选区内的文本高亮全选（目标文本需

要放在独立的div块级容器内）。根据这特性，用CSSmargin修饰下，利用这个特点，正好可以解决上述第二种方法在ios

设备的不兼容。经过测试，无论安卓和ios平台，般手机自带的系统浏览器都是可以兼容的。至于uc浏览器、百度浏览器等

其他厂家的移动端产品，由于有不同的机制，只能使用这些浏览器菜单提供的“自由复制”功能。

所以，我综合了第二种和第三种方式，使用jQuerymobile中的taphold事件来模拟longtap操作激发手机系统的复制菜单，这样

基本上可以做到在所有移动设备浏览器上都能实现长按文本区域来高亮选中所有文本内容。再提句，taphold的兼容bug这里

就不详细附解决方法了，如果你的项目要求精益求精，你可以自行搜索解决方案。

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

HTML代码：

divclass=pararequirement

divclass=tipstips-t

、必须首次下载才生效br/

2、不能从排行榜下载哦

/div

divclass=cparea

divclass=kwdid=kwdspan三国艳义手机优化大师/span/div

/div

divclass=cparea

spanclass=kdesb★/b长按虚线框,拷贝关键词/span

/div

ahref=https://itunesapp