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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
JQuery动画animate的stop方法使用详解
May 09 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
JS打印组合功能
Aug 04 Javascript
js 轮播效果实例分享
Dec 28 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
微信小程序实现蓝牙打印
Sep 23 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
PHP 数组遍历顺序理解
2009/09/09 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
thinkphp的c方法使用示例
2014/02/24 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
iOS10推送通知开发教程
2016/09/19 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
新闻内页-JS分页
2006/06/07 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
document.getElementById介绍
2011/09/13 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
Python实现统计英文文章词频的方法分析
2019/01/28 Python
Python配置文件处理的方法教程
2019/08/29 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
Python 实现一个计时器
2020/07/28 Python
会计岗位职责模板
2014/03/12 职场文书
青奥会口号
2014/06/12 职场文书
政风行风建设整改方案
2014/10/27 职场文书
党的群众路线调研报告
2014/11/03 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL
方法汇总:Python 安装第三方库常用
2022/04/26 Python