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 相关文章推荐
比较简单实用的使用正则三种版本的js去空格处理方法
Nov 18 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
babel基本使用详解
Feb 17 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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 strtotime函数详解
2009/12/18 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
表单内同名元素的控制
2006/11/22 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
Python本地与全局命名空间用法实例
2015/06/16 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
Python 实现微信防撤回功能
2019/04/29 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
通信工程毕业生求职信
2013/11/16 职场文书
给排水工程师岗位职责
2013/11/21 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
死亡证明书样本说明
2014/10/18 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
SQL Server中的游标介绍
2022/05/20 SQL Server
python内置模块之上下文管理contextlib
2022/06/14 Python
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS