益吾库源码下载Clipboard.js 跨浏览器一键复制插件

Clipboard.js 跨浏览器一键复制插件

Clipboard.js 跨浏览器一键复制插件
2017年08月10日 21:45:49益点益滴源码下载19601

资源介绍

clipboard.js是一个github上的开源项目,可以实现纯 JavaScript (无需 Flash)的浏览器内容复制到系统剪贴板的功能,可以在多种浏览器和 Node.js 环境中使用。已知支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+等浏览器。用clipboard.js实现一键复制效果比较简单,仅仅只需下面3步:

1.下载保存clipboard.min.js,并在页面中引用clipboard.min.js文件:<script type="text/javascript" src="你的目录/clipboard.min.js"></script>

2.选择一个可以确定被拷贝元素的选择器,这里以入门实例定义一个button按钮复制其本身属性值为例:

<button class="btn" data-clipboard-text="http://www.yiwuku.com">点击复制</button>

3.书写实例化js语句,建立clipboard对象。复制操作后执行的方法参见示例;

<script type="text/javascript">
var clipboard = new Clipboard('.btn');
</script>

演示实例:

<script src="http://demo.jb51.net/js/2015/clipboard/clipboard.min.js"></script>    
<textarea id="bar" cols="62" rows="5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">这些是即将被复制的示例文字。</textarea>    
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">点击复制</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>

clipboard.js的用法很灵活,可以实现多种复制或剪切效果。具体可参阅官方使用教程:https://clipboardjs.com/#example-text

超赞,真给力!嗯,必须鼓励~

打赏 0

欢迎点评!或反馈疑问...

支持Ctrl+Enter提交
  • 1条留言
  • 加菜壮汉2017年08月13日 13:32:43
  • 找好久这种插件了,这个真不错啊
账号:mxy310@163.com[复制]
账号:77940140[复制]

深切哀悼

抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞!

×
M