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 30 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
JavaScript中创建字典对象(dictionary)实例
Mar 31 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 Javascript
在vue中使用image-webpack-loader实例
Nov 12 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 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函数
2008/10/03 PHP
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
php修改数组键名的方法示例
2017/04/15 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
Javascript实现字数统计
2015/07/03 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
python实现复制整个目录的方法
2015/05/12 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
项目经理岗位职责
2013/11/11 职场文书
入党积极分子思想汇报范文
2014/01/05 职场文书
工程建设实施方案
2014/03/14 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
学校运动会简讯
2015/07/20 职场文书
检讨书之工作不认真
2019/08/14 职场文书
Vue3中的Refs和Ref详情
2021/11/11 Vue.js