Clipboard.js 无需Flash的JavaScript复制粘贴库


Posted in Javascript onOctober 02, 2015

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

五、移动端复制失败分析详解

移动端复制失败的原因基本都是要获取的内容无法被选中,如此才获取不到内容,用上面的函数基本可以解决,但亦可看看分析过程。

六、支持的浏览器

谷歌42+,火狐41+,其他自己查看官方

下面是实例

clipboard.js 实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能。可以在浏览器和 Node 环境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+

Clipboard.js 无需Flash的JavaScript复制粘贴库

官方网站:https://github.com/zenorocha/clipboard.js

软件下载://3water.com/jiaoben/385604.html

官方使用方法:https://zenorocha.github.io/clipboard.js/#example-text

示例代码:

官方实例一:
在线演示:http://demo.3water.com/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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
脚本之家贴图转换+转贴工具用到的js代码超级推荐
Apr 05 Javascript
JavaScript入门教程 Cookies
Jan 31 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
jquery与ajax获取特殊字符实例详解
Jan 08 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 #Javascript
jQuery+PHP星级评分实现方法
Oct 02 #Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 #Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 #Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 #Javascript
JS处理json日期格式化问题
Oct 01 #Javascript
JS日期格式化之javascript Date format
Oct 01 #Javascript
You might like
php新建文件自动编号的思路与实现
2011/06/27 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
跟老齐学Python之有点简约的元组
2014/09/24 Python
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
Django 路由控制的实现代码
2018/11/08 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
python如何爬取动态网站
2020/09/09 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
社区学习雷锋活动总结
2014/04/25 职场文书
企业文化口号
2014/06/12 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
2014年度党员自我评议
2014/09/13 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
员工激励培训演讲稿
2014/09/16 职场文书