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 相关文章推荐
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
javascript的理解及经典案例分析
May 20 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
javascript数组includes、reduce的基本使用
Jul 02 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编程网上资源导航
2006/10/09 PHP
PHP实现文件安全下载
2006/10/09 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
Python入门篇之文件
2014/10/20 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
python生成requirements.txt的两种方法
2019/09/18 Python
Python的缺点和劣势分析
2019/11/19 Python
python二元表达式用法
2019/12/04 Python
Python @property原理解析和用法实例
2020/02/11 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
介绍一下MD5加密算法
2016/11/12 面试题
会计学自我鉴定
2014/02/06 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
思想工作总结范文
2015/08/12 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
室外天线与收音机天线杆接合方法
2022/04/05 无线电