Clipboard.js 无需Flash的JavaScript复制粘贴库_javascript技巧_脚本之家
脚本之家
服务器常用软件
手机版
投稿中心
关注微信
快捷导航
软件下载
android
MAC
驱动下载
字体下载
DLL
源码下载
PHP
ASP.NET
ASP
JSP
软件编程
C#
JAVA
C 语言
Delphi
Android
网络编程
PHP
ASP.NET
ASP
JavaScript
在线工具
CSS格式化
JS格式化
Html转化为Js
数据库
MYSQL
MSSQL
oracle
DB2
MARIADB
CMS
PHPCMS
DEDECMS
帝国CMS
WordPress
常用工具
PHP开发工具
python
Photoshop
必备软件
网站首页
网页制作
网络编程
脚本专栏
脚本下载
数据库
服务器
电子书籍
操作系统
网站运营
平面设计
其它
媒体动画
电脑基础
硬件教程
网络安全
基础知识
javascript类库
表单特效
广告代码
网页特效
黑客性质
javascript技巧
DOM
node.js
js其它
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript 内容复制 Clipboard
Clipboard.js 无需Flash的JavaScript复制粘贴库
更新时间：2015年10月02日 13:26:03 投稿：mdxy-dxy
这篇文章主要介绍了JavaScript 内容复制(无需flash) Clipboard.js使用方法,需要的朋友可以参考下
clipboard.js基本使用
clipboard.js 是一个不需要flash，将文本复制到剪贴板的插件。简单介绍下基本运用。
一、引入插件
<script src="js/clipboard.min.js"></script>
二、基本使用
首先需要您需要通过传递DOM选择器，HTML元素或HTML元素列表来实例化它。
new Clipboard('.btn');
用一个元素当触发器来复制另一个元素的文本,data-clipboard-target属性后需要跟属性选择器
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<button class="btn" data-clipboard-target="#foo">
</button>
另外还有另外一个属性data-clipboard-action属性，以指定是要要么copy还是要cut操作。默认情况下是copy。cut操作只适用于或元素。
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>
从属性中复制文本，不需要另一个元素当触发器，可以使用data-clipboard-text属性，在后面放上需要复制的文本.
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
三、其他说明
1、通过运行检查clipboard.js是否支持Clipboard.isSupported()，返回true则可以使用。
2、显示一些用户反馈或捕获在复制/剪切操作后选择的内容。操作，文本，触发元素
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
该插件使用的是事件委托的方式来触发，所以大大减少了对dom的操作。
四、高级使用
如果你不想修改你的HTML，又或者要获取内容的标签是无法被选中【移动端经常遇到的问题】，那么你可以使用一个非常方便的命令API。所以你需要做的是声明一个函数，写下你想要的操作，并返回一个值。下面是一个对不同id的触发器返回不同的值的例子。具体的使用方法请看https://clipboardjs.com
五、移动端复制失败分析详解
移动端复制失败的原因基本都是要获取的内容无法被选中，如此才获取不到内容，用上面的函数基本可以解决，但亦可看看分析过程。
clipboard.js在移动端复制失败的解决方法
六、支持的浏览器
谷歌42+，火狐41+，其他自己查看官方
下面是实例
clipboard.js 实现了纯 JavaScript （无 Flash）的浏览器内容复制到系统剪贴板的功能。可以在浏览器和 Node 环境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+
官方网站：https://github.com/zenorocha/clipboard.js
软件下载：//www.jb51.net/jiaoben/385604.html
官方使用方法：https://zenorocha.github.io/clipboard.js/#example-text
示例代码：
官方实例一：
在线演示：http://demo.jb51.net/js/2015/clipboard/
<script src="clipboard.min.js"></script>
<textarea id="bar" cols="62" rows="5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">脚本之家是国内专业的网站建设资源、脚本编程学习类网站，提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">
Cut to clipboard
</button>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
alert("复制成功");
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
</script>
官方实例二：
<script src="dist/clipboard.min.js"></script>
<button class="btn">
<script type="text/javascript">
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
</script>
到此这篇关于Clipboard.js 无需Flash的JavaScript复制粘贴库的文章就介绍到这了,更多相关JavaScript 内容复制 Clipboard内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:clipboard.js使用总结JS如何使用剪贴板操作Clipboard APIJS插件clipboard.js实现一键复制粘贴功能使用clipboard.js实现复制功能的示例代码JS基于clipBoard.js插件实现剪切、复制、粘贴clipboard.js在移动端复制失败的解决方法clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切使用clipboard.js库实现复制剪切功能
JavaScript
内容复制
Clipboard
相关文章
JSON的parse()方法介绍今天小编就为大家分享一篇关于JSON的parse()方法介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧 2019-01-01
JavaScript 数组的进化与性能分析这篇文章主要介绍了JavaScript 数组的进化与性能分析,本文讲得更多的是内存、优化、语法差异、性能、近来的演进。需要的朋友可以参考下 2017-09-09
react-router-dom v6 通过outlet实现keepAlive 功能的实现本文主要介绍了react-router-dom v6 通过outlet实现keepAlive功能，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 2022-03-03
ztree获取当前选中节点子节点id集合的方法这篇文章主要介绍了ztree获取当前选中节点子节点id集合的方法,实例分析了ztree的方法transformToArray使用技巧,需要的朋友可以参考下 2015-02-02
自己的js工具 Cookie 封装有些时候我们的web程序需要利用cookie来实现一些功能,很多时候我们并不需要非得用服务端来操作cookie,因为js可以也操作cookie.
2009-08-08
基于Cesium实现拖拽3D模型的示例代码这篇文章主要为大家详细介绍了如何利用Cesium实现在地图上添加一个3D模型，并且可以实现拖拽效果。文中的示例代码讲解详细，感兴趣的可以了解一下 2022-06-06
详解js常用分割取字符串的方法这篇文章主要介绍了js常用分割取字符串的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
判断window.onload是否多次使用的方法window.onload想必大家都有使用过吧，在窗口加载时执行，如果多次使用window.onload该如何判断呢？下面与大家分享个方法 2014-09-09
从父页面读取和操作iframe中内容方法在父页面中访问iframe中的各个元素与一般的访问页面元素无本质区别，无非是需要在父页面中事先获取需要处理的iframe对象，在获取iframe对象后，其操作基本没什么特别之处。 2009-07-07
JS控制一个DIV层在指定时间内消失的方法这篇文章主要介绍了JS控制一个DIV层在指定时间内消失的方法,需要的朋友可以参考下 2014-02-02
最新评论
大家感兴趣的内容
1JS删除数组里的某个元素方法2js刷新页面方法大全3JS中setTimeout()的用法详解4js页面跳转常用的几种方式5JS截取字符串常用方法详细整理6js数组与字符串的相互转换方法7js保留两位小数方法总结8JS设置cookie、读取cookie、删除cookie9JS打开新窗口的2种方式10js 将json字符串转换为json对象的方法解析
最近更新的内容
通过网页查看JS源码中汉字显示乱码的解决方法JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码JavaScript实现带箭头标识的多级下拉菜单效果JavaScript实现动态增删表格的方法javascript拖拽上传类库DropzoneJS使用方法JS错误处理与调试操作实例分析JavaScript封装单向链表的示例代码JS获取计算机mac地址以及IP的实现方法原生js拖拽(第一课 未兼容)拖拽思路JS对象和字符串之间互换操作实例分析
常用在线小工具
微信
投稿
脚本任务
在线工具
关注微信公众号
关于我们 -
广告合作 -
联系我们 -
免责声明 -
网站地图 -
投诉建议 -
在线投稿
CopyRight 2006-2021 JB51.Net Inc All Rights Reserved. 脚本之家 版权所有