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


Posted in HTML / CSS onDecember 03, 2016

最近需要给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 = 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用户可能知道,长按某一文本选区内文字周围的空白区域,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://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的外边距。最终,不仅视觉上和设计图保持了一致,也实现了长按全选激发系统菜单。

最后再补充一下支持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);   
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
Sep 24 HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 HTML / CSS
HTML5所有标签汇总及标签意义解释
Mar 12 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
html5开发三八女王节表白神器
Mar 07 HTML / CSS
做一个能自适应高度的textarea的示例代码
Sep 06 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 HTML / CSS
HTML5标签大全
Nov 23 #HTML / CSS
HTML5拖放效果的实现代码
Nov 17 #HTML / CSS
html5 div布局与table布局详解
Nov 16 #HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 #HTML / CSS
HTML5制作表格样式
Nov 15 #HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 #HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 #HTML / CSS
You might like
php查找任何页面上的所有链接的方法
2013/12/03 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
php封装的smarty类完整实例
2016/10/19 PHP
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
jquery实现简单的表单验证
2015/11/17 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
《唯一的听众》教学反思
2014/02/20 职场文书
迎七一演讲稿
2014/09/12 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
中小学生学籍证明
2014/10/25 职场文书
民事赔偿协议书
2014/11/02 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
Python list列表删除元素的4种方法
2021/11/01 Python
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏