所以，我综合了第二种和第三种方式，使用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://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: -2em 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的外边距。最终，不仅视觉上和设计图保持了一致，也实现了长按全选激发系统菜单。
