JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)


Posted in Javascript onMarch 30, 2017

新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了。写出了总结下

使用的方法:clipboard

插件下载地址:https://github.com/zenorocha/clipboard.js/tree/master

引入插件:目录\clipboard.js-master\dist\clipboard.min.js

目录中有各种demo,分别实现了固定的文字复制,input的复制等等,可以看下找找思路;

下边来记录下使用的方式:

一:引入插件:

<script src="js/clipboard.min.js" type="text/javascript"></script>

二:给标签添加属性:data-clipboard-text

<div id="btn" data-clipboard-text="1">
    <span>Copy</span>
  </div>

三:定义script :实现复制功能---(写的内部的script,外部的总是报错,找不到类,新手不大懂,以后再补充)

<script>
var clipboard = new Clipboard('btn');
clipboard.on('success', function(e) {
e.clearSelection();
//复制成功
});
clipboard.on('error', function(e) {
//复制失败
});
</script>

补充:new Clipboard()----参数为id class都可以,跟css定义一样   id 或者.class

四:自定义复制的内容;

new Clipboard('.btn', {
  target: function(trigger) {
    return trigger.nextElementSibling;
  }
});

通过return返回想复制的内容,

五:列表页复制每条列表内容

可以给每个item自定义属性data-clipboard-text即可

div.setAttribute("data-clipboard-text","asdf");

补充:电脑浏览器几乎都可以支持,手机上安卓可以,苹果有点问题,需要把标签设置成button

以上所述是小编给大家介绍的JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery中获取iframe的代码
Jan 11 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
JQuery替换DOM节点的方法
Jun 11 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 #Javascript
基于jquery实现二级联动效果
Mar 30 #jQuery
javascript中的面向对象
Mar 30 #Javascript
详解JavaScript对象的深浅复制
Mar 30 #Javascript
js实现不提示直接关闭网页窗口
Mar 30 #Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 #jQuery
JavaScript实现弹出广告功能
Mar 30 #Javascript
You might like
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
php探针不显示内存解决方法
2019/09/17 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
arguments对象
2006/11/20 Javascript
JS与框架页的操作代码
2010/01/17 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
python ip正则式
2009/05/07 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
python实现学生管理系统
2018/01/11 Python
numpy.random模块用法总结
2019/05/27 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
pygame实现俄罗斯方块游戏(基础篇2)
2019/10/29 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
详解python中的lambda与sorted函数
2020/09/04 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
苹果音乐订阅:Apple Music
2018/08/02 全球购物
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
高中毕业自我评价
2014/02/08 职场文书
房地产项目建议书
2014/03/12 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL
Python 中的Sympy详细使用
2021/08/07 Python