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 渐变(Gradients)之CSS3 线性渐变
Jul 08 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
May 12 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
amazeui时间组件的实现示例
Aug 18 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 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
example2.php
2006/10/09 PHP
PHP生成plist数据的方法
2015/06/16 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
JS控制日期显示的小例子
2013/11/23 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
vuex进阶知识点巩固
2018/05/20 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
python3.5使用tkinter制作记事本
2016/06/20 Python
python如何修改装饰器中参数
2018/03/20 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
python 爬取小说并下载的示例
2020/12/07 Python
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
Shell如何接收变量输入
2012/09/24 面试题
中科方德软件测试面试题
2016/04/21 面试题
教师自荐信
2013/12/10 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
家长建议怎么写
2014/05/15 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
民事上诉状范文
2015/05/22 职场文书
主题班会开场白
2015/06/01 职场文书
如何写好开幕词?
2019/06/24 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS