web页面长按复制文本clipboard.js 使用教程
2016-12-16 15:25
507 查看
纯JavaScript实现的复制剪切库–clipboard.js
clipboard.js 使用纯 JavaScript (无需 Flash)实现了复制浏览器内容到系统剪切板的功能,可以在浏览器和 Node 环境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+。复制文本到剪切板并不是件困难的事情,它不需要复杂的配置步骤或者多说KBs的加载,但大多数情况下,都需要依赖Flash或者其他臃肿的框架,这就是clipboard.js存在的意义。
安装
使用 npm或者
bower安装:
//You can get it on npm.
npm install clipboard --save
//Or bower, too.
bower install clipboard --save
如果你没有上述包管理工具的话,可以直接下载 .zip 文件。
设置
首先加载 js 文件:<script src="dist/clipboard.min.js"></script>
//或使用CDN
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>
现在你需要使用 DOM 选择器来实例化它,该选择器对应于选择元素,如:
<button class="btn">
new Clipboard('.btn');
我们需要获取每一个匹配的元素,并为每个元素添加事件监听器,但是如果匹配元素很多的话,会消耗大量的内容。为此,我们使用事件代表团,它用一个单独的侦听器替换多个事件侦听器。
使用
复制元素
常见的用法是从另一个元素中复制内容,你可以通过给目标元素添加一个 data-clipboard-target属性来指定剪贴板目标元素。
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
剪切元素
另外,你还可以通过 data-clipboard-action 属性来定义是“复制 copy”还是“剪切
cut”内容。如果忽略该属性,则默认值为
copy。
<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>
cut动作只能用于
<input>或者
<textarea>元素。
从属性中复制
事实上,你甚至不需要任何其他元素就能实现复制功能。你只需在目标元素中包含一个 data-clipboard-text属性即可。
<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
事件
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);
});
高级用法
new Clipboard('.btn', {target: function(trigger) {
return trigger.nextElementSibling;
}
});
new Clipboard('.btn', {
text: function(trigger) {
return trigger.getAttribute('aria-label');
}
});
var clipboard = new Clipboard('.btn');
clipboard.destroy();
浏览器支持
演示
具体效果可以查看本站代码位置参考文章:http://www.xttblog.com/?p=494 文章中例子执行有点问题
http://9iphp.com/web/javascript/js-copy-library-clipboard-js.html http://blog.csdn.net/three_bird/article/details/51336828
官网:https://clipboardjs.com/
相关文章推荐
- 点击按钮 复制文本 使用clipboard.js复制页面内容到剪切板
- 使用clipboard.js实现页面内容复制到剪贴板
- 使用clipboard.js实现复制文本内容到剪贴板
- ZeroClipboard实现跨浏览器复制内容到剪贴板(附ZeroClipboard.js下载及使用教程)
- 使用clipboard.js复制页面内容到剪切板
- 使用clipboard.js复制页面内容到剪切板
- 使用clipBoard.js进行页面内容复制
- 使用clipboard.js实现页面内容复制到剪贴板
- 使用clipboard.js实现页面内容复制到剪贴板
- 使用clipboard.js实现页面内容复制到剪贴板
- js刷新页面方法大全使用教程
- [后端人员耍前端系列]KnockoutJs篇:使用WebApi+Bootstrap+KnockoutJs打造单页面程序
- clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
- 使用js代码完成页面文本防复制功能
- 一段简单的使用js在web页面中显示日期时间的代码
- ZeroClipboard js复制文本(兼容全部浏览器)
- Zero Clipboard js+swf实现的复制功能使用方法
- jQuery EasyUI使用教程之创建Web页面的边框布局
- Zero Clipboard js+swf实现的复制功能使用方法
- Zero Clipboard js+swf实现的复制功能使用方法