近期必须给HTML5的WebAPP在网页页面上完成1个拷贝作用：客户点一下长按文字会全选文本并弹出系统软件“拷贝”菜单，客户能够点一下“拷贝”开展拷贝实际操作，随后粘贴到AppStore检索对应的运用。之因此并不是选用连接方式立即自动跳转到AppStore对应运用是以便根据客户的积极键入重要词检索给营销推广的公司App提升权重。因此这1个“拷贝”作用对客户的体验相当关键。
尝试了1些做法，在安卓系统/iOS服务平台上的适配性都并不是很好。在手机微信访问器内是很非常容易完成长按文字激起系统软件菜单，高亮度全选文字內容的。可是在别的访问器的主要表现就并不是很1致了。包含仿真模拟focus input，JavaScript Selection, 应用a标识尝试激活系统软件菜单。这些方式都存在适配的缺点。
1）尽管应用带有href特性的a标识在uc访问器和百度搜索访问器上长按文字会出現“随意拷贝”/“挑选文字”菜单，挑选该菜单后会出現“全选/拷贝”的菜单，可是在1些安卓系统手机上的系统软件访问器和iPhone中却被视作纯连接，只弹出“拷贝连接”，沒有“拷贝文字”菜单。更何况即便只考虑到少一部分访问器可行，这样也给客户实际操作多了1步，提升了繁杂度。因此该计划方案不能取。
2）依靠selection和range的方式必须考虑到到不一样访问器的适配性，编码以下：
function selectText(element) {
var doc = document,
text = docgetElementById(element),
range,
selection;
if (docbodycreateTextRange) {
range = documentbodycreateTextRange();
rangemoveToElementText(text);
rangeselect();
} else if (windowgetSelection) {
selection = windowgetSelection();
range = documentcreateRange();
rangeselectNodeContents(text);
selectionremoveAllRanges();
selectionaddRange(range);
/*if(selectionsetBaseAndExtent){
selectionsetBaseAndExtent(text, 0, text, 1);
}*/
}else{
alert("none");
}
}
遗憾的是在iphone Safari上仍然没法根据点一下或长按高亮度选定全部文字（既然也适用window.getSelection，为什么在Safari访问器addRange实际操作后文字不可以默认设置选定，了解缘故的请留言指教）。因而，该方法存在缺点。积极选定文字地区的方式后边后附上。
3）iPhone客户将会了解，长按某1文字选区内文本周边的空白地区，Safari会全自动将该选区内的文字高亮度全选（总体目标文字必须放在单独的div块级器皿内）。依据这1特点，用CSS margin装饰1下，运用这个特性，恰好能够处理上述第2种方式在ios机器设备的兼容问题。历经检测，不管安卓系统和ios服务平台，1般手机上自带的系统软件访问器全是能够适配的。至于uc访问器、百度搜索访问器等别的厂家的挪动端商品，因为有不一样的体制，只能应用这些访问器菜单出示的“随意拷贝”作用。
因此，我综合性了第2种和第3种方法，应用jQuery mobile中的taphold恶性事件来仿真模拟longtap实际操作激起手机上系统软件的拷贝菜单，这样基础上能够保证在全部挪动机器设备访问器上都能完成长按文字地区来高亮度选定全部文字內容。再提1句，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>3国艳义手机上提升高手</span></div>
</div>
<div class="cparea">
<span class="kdes"><b>★</b>长按虚线框,复制重要词</span>
</div>
<a href="https://itunesapplecom/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 = docgetElementById("kwd"),
range,
selection;
if (docbodycreateTextRange) {
range = documentbodycreateTextRange();
rangemoveToElementText(text);
rangeselect();
} else if (windowgetSelection) {
selection = windowgetSelection();
range = documentcreateRange();
rangeselectNodeContents(text);
selectionremoveAllRanges();
selectionaddRange(range);
}else{
alert("访问器不适用长按拷贝作用");
}
});
</script>
重要的CSS编码：
cparea{
text-align: center;
font-family: Microsoft Yahei;
margin: ⑵em 0 0;
}
kwd{
display: inline-block;
color: #272727;
background-color: #fff;
font-size: 1875em;
font-size: 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: 25em;
padding-right: 1em;
}
表明：这里的margin：2em更是以便完成Safari访问器上的长按全选作用，以便重视复原设计方案稿实际效果，父器皿.cparea又应用了负边距来相抵这个2em的外边距。最后，不但视觉效果上和设计方案图维持了1致，也完成了长按全选激起系统软件菜单。
最终再填补1下适用Safari下的详细方式：
$("#kwd").bind("taphold", function(){
var doc = document,
text = docgetElementById("kwd"),
range,
selection;
if (docbodycreateTextRange) { //IE
range = documentbodycreateTextRange();
rangemoveToElementText(text);
rangeselect();
} else if (windowgetSelection) { //FF CH SF
selection = windowgetSelection();
range = documentcreateRange();
rangeselectNodeContents(text);
selectionremoveAllRanges();
selectionaddRange(range);
//检测
consolelog(texttextContent);
textinnerText && consolelog(textinnerText); //FireFox不适用innerText
consolelog(texttextContentlength);
textinnerText && consolelog(textinnerTextlength); //在Chrome下长度比IE/FF下多1
consolelog(textfirstChildtextContentlength);
textinnerText && consolelog(textfirstChildinnerTextlength);
consolelog(textfirstChildinnerHTMLlength);
//留意IE9-不适用textContent
makeSelection(0, textfirstChildtextContentlength, 0, textfirstChild);
/*
if(selectionsetBaseAndExtent){
selectionselectAllChildren(text);
selectionsetBaseAndExtent(text, 0, text, 4);
}
*/
}else{
alert("访问器不适用长按拷贝作用");
}
});
function makeSelection(start, end, child, parent) {
var range = documentcreateRange();
//consolelog(parentchildNodes[child]);
rangesetStart(parentchildNodes[child], start);
rangesetEnd(parentchildNodes[child], end);
var sel = windowgetSelection();
selremoveAllRanges();
seladdRange(range);
}
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。