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 相关文章推荐
CSS3 background-image颜色渐变的实现代码
Sep 13 HTML / CSS
用CSS3将你的设计带入下个高度
Aug 08 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
Mar 16 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
web字体加载方案优化小结
Nov 29 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 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中,文件上传
2006/12/06 PHP
php 多个submit提交表单 处理方法
2009/07/07 PHP
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
python学生信息管理系统(初级版)
2018/10/17 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
简单分析python的类变量、实例变量
2019/08/23 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
Python中itertools的用法详解
2020/02/07 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
python的setattr函数实例用法
2020/12/16 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
护理专业学生的求职信范文
2013/12/11 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
Ruby处理CSV数据方法详解
2022/04/18 Ruby