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 相关文章推荐
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
JavaScript实现异步图像上传功能
Jul 12 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
微信小程序实现底部弹出框
Nov 18 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
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
Python itertools模块详解
2015/05/09 Python
python使用PyGame模块播放声音的方法
2015/05/20 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
中医专业职业生涯规划书范文
2014/01/04 职场文书
军训自我鉴定200字
2014/02/13 职场文书
社会学专业求职信
2014/02/24 职场文书
求职个人评价范文
2014/04/09 职场文书
安全生产专项整治方案
2014/05/06 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫