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 相关文章推荐
兼容ie和firefox js关闭代码
Dec 11 Javascript
javascript globalStorage类代码
Jun 04 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 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中实现精确设置session过期时间的方法
2014/07/17 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
PHP中each与list用法分析
2016/01/08 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
python生成密码字典的方法
2018/07/06 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
体育教育毕业生自荐信
2013/11/21 职场文书
研究生毕业鉴定
2014/01/29 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
退学证明范本3篇
2014/10/29 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python
mysql的Buffer Pool存储及原理
2022/04/02 MySQL
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang