扣丁学堂HTML5培训简述HTML5如何实现移动端复制功能

2019-07-11 15:24:05 2857浏览

HTML5实现移动端复制这个问题我们在工作中也许会遇到,遇到以后如何处理呢?很多人会选择找百度,但是发现基本都是用js实现,而且兼容性还非常不好。本篇文章扣丁学堂HTML5培训小编给大家介绍一下HTML5实现移动端复制功能,文中还给大家介绍了使用clipboard.js实现移动端粘贴复制功能的实现代码,感兴趣的小伙伴就随小编来了解一下吧。


扣丁学堂HTML5培训简述HTML5如何实现移动端复制功能


在寻觅和尝试的过程中,发现只需要css代码也可以完全实现的,对需要复制内容的标签加上下面这几行代码就可以了。


-webkit-touch-callout: all;
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;


其实意思就是不限制用户对内容的操作,不禁用系统默认菜单,长按会显示系统自带的复制功能进行复制。



使用clipboard.js实现移动端粘贴复制


clipboard.js是一款很强大的粘贴复制的插件,但是在移动端使用,会出现兼容性问题。下面是常使用的一种解决方案。


html


<input id="foo1"  value="http://www.shellad.com/_2SP__22(要复制的内容)" readonly="readonly">
<div class="the_btn_con"><button class="btn" data-clipboard-target="#foo1">复制</button></div>


js


$(function () {
       var clipboard = new Clipboard('.btn');
       //优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后,手动选择“拷贝”进行复制
       clipboard.on('success', function(e) {
           alert('复制成功!')
           console.log($(this))
           e.clearSelection();
       });
       clipboard.on('error', function(e) {
           alert('请选择“拷贝”进行复制!')
       });
   })


注意我们在保存要复制的内容时使用的是input控件,而不是div或者span。因为,在测试时只有input的兼容性最好,不会出现问题,能够保证正常复制。同时,该插件也不支持safari 版本号<10,所以要做好提示。



想要了解更多关于HTML5方面内容的小伙伴,请关注扣丁学堂HTML5培训官网、微信等平台,扣丁学堂IT职业在线学习教育平台为您提供权威的HTML5开发环境搭建视频,HTML5培训后的前景无限,行业薪资和未来的发展会越来越好的,扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群:673883249。


                          【扫码进入HTML5VIP免费公开课】  


     【关注微信公众号获取更多学习资料】        【扫码进入HTML5前端开发VIP免费公开课】  



查看更多关于“HTML5开发技术资讯”的相关文章>>


标签: HTML5培训 HTML5视频教程 HTML5学习视频 HTML5在线视频 HTML5培训班 微信小程序
微信
微博
15311698296

全国免费咨询热线

邮箱:codingke@1000phone.com

官方群:148715490

北京千锋互联科技有限公司版权所有   北京市海淀区宝盛北里西区28号中关村智诚科创大厦4层
京ICP备12003911号-6   Copyright © 2013 - 2019
返回顶部 返回顶部