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 08 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
Bootstrap进度条学习使用
Feb 09 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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中上传多个文件的表单设计例子
2014/11/19 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
Python 字典与字符串的互转实例
2017/01/13 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
索尼巴西商店:Sony巴西
2019/06/21 全球购物
毕业生自荐信格式
2014/03/07 职场文书
写给父母的感谢信
2015/01/22 职场文书
小学教师节活动总结
2015/03/20 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android