HTML5实现移动端复制功能


Posted in HTML / CSS onApril 19, 2018

首先遇到这个需求是就各种百度,但是发现基本都是用js实现,而且兼容性还非常不好。

但是在寻觅和尝试的过程中,发现只需要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实现移动端复制功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 #HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 #HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 #HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 #HTML / CSS
canvas线条的属性详解
Mar 27 #HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 #HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 #HTML / CSS
You might like
php生成N个不重复的随机数实例
2013/11/12 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
js 调用百度分享功能
2017/02/27 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
父亲生日宴会答谢词
2014/01/10 职场文书
四风问题自查报告剖析材料
2014/02/08 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
意向协议书
2015/01/27 职场文书
音乐教师求职信范文
2015/03/20 职场文书
党纪处分决定书
2015/06/24 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
八年级作文之友情
2019/11/25 职场文书