其他代码
Clipboard - 复制文本到剪贴板JavaScript插件
PetitQ
clipboard.js 是一款轻量级的实现复制文本到剪贴板功能的 JavaScript 插件。通过该插件可以将输入框，文本域，DIV 元素中的文本等文本内容复制到剪贴板中。它不依赖 flash，使用非常简单。
使用方法:
或者下载压缩包，在页面中引入 clipboard.js 文件。
也想出现在这里？联系我们吧
<script type="text/javascript" src="js/clipboard.js"></script>
复制文本:
你可以在触发元素上添加 data-clipboard-target 属性，该属性指向要进行复制的目标元素的 ID，例如下面的代码：
<!-- 目标元素 -->
<input id="foo" value="要复制的文本">
<!-- 触发元素 -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="复制到剪贴板">
</button>
剪切文本:
你可以通过 data-clipboard-action 属性来指明你是想要“复制”，还是要“剪切”。如果没有指明该属性，默认为进行复制操作。
<!-- 目标元素 -->
<textarea id="bar">要剪切的内容</textarea>
<!-- 触发元素 -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
剪切到剪贴板
</button>
从属性中复制:
你可以在目标元素上设置 data-clipboard-text 属性，点击触发元素后会将该属性的内容复制到剪贴板中。
<button class="btn" data-clipboard-text="这里的内容会被复制">
复制到剪贴板
</button>
事件:
在执行复制操作之后，会触发 success 和 error 回调函数。
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);
});
高级参数:
如果你不想修改你的 HTML 代码，可以通过下面的参数来执行复制操作。如果你想动态的设置一个 target 目标元素，你可以像下面这样做。
new Clipboard('.btn', {
target: function(trigger) {
return trigger.nextElementSibling;
}});
如果你想动态的设置文本，可以：
new Clipboard('.btn', {
text: function(trigger) {
return trigger.getAttribute('aria-label');
}});
销毁 clipboard.js 插件的方法如下：
var clipboard = new Clipboard('.btn');
clipboard.destroy();
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
