详解移动端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动画效果
Aug 14 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
Sep 04 HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
html5 canvas实现圆形时钟代码分享
Dec 25 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
HTML5 canvas基本绘图之绘制线条
Jun 27 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 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+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
php命令行模式代码实例详解
2021/02/26 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
vue实现计算器功能
2020/02/22 Javascript
详解python中executemany和序列的使用方法
2017/08/12 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
python中的列表与元组的使用
2019/08/08 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
Python中的延迟绑定原理详解
2019/10/11 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
自荐信怎么写呢?
2013/12/09 职场文书
护理专业自荐信范文
2014/02/26 职场文书
体育活动总结范文
2014/05/04 职场文书
安全技术说明书
2014/05/09 职场文书
cf战队收人口号
2014/06/21 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
初中团委工作总结
2015/08/13 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
导游词之青城山景区
2019/09/27 职场文书
Python OpenCV超详细讲解基本功能
2022/04/02 Python