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日期插件datepicker的使用方法
Mar 03 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 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操作mysql数据库的基本类代码
2014/02/25 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
javascript document.referrer 用法
2009/04/30 Javascript
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
Python+django实现简单的文件上传
2016/08/17 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
超简单使用Python换脸实例
2019/03/27 Python
Python笔记之facade模式
2019/11/20 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
python GUI模拟实现计算器
2020/06/22 Python
Python的信号库Blinker用法详解
2020/12/31 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
高中历史教学反思
2014/02/08 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
委托书范文
2014/04/02 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
收入证明申请书
2015/06/12 职场文书
工作感言一句话
2015/08/01 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server