不错呦!smile@林凯西,确保“准备文件”中的几个文件都有安装,S...您好,看了您这篇帖子觉得很有帮助。但是有个问题想请...我的修改过了怎么还被恶意注册呢 @jjjjiiii 用PJ快9年了,主要是A...PJ3啊,貌似很少有人用PJ了,现在不是WP就是z...@332347365,我当时接入时错误码没有-10...楼主,ChkValue值应为-103是什么意思呢?...大哥 你最近能看到我发的信息,请跟我联系,我有个制...
Javascript复制粘贴脚本库clipboard.js使用示例
编辑:dnawo 日期:2020-04-22
clipboard.js不依赖flash,不依赖其他框架,gzip压缩后只有3kb大小。
一、引用clipboard.js
二、clipboard.js使用示例
1、从另一个元素复制文本:
或:
2、从属性复制文本:
或:
如果data-clipboard-text的值是动态赋值且比较耗时,可能导致复制的结果不正确,下边是我想到的一种解决方案:
3、监听success和error事件反馈复制结果:
参考资料
[1].clipboard.js中文网:http://www.clipboardjs.cn/
一、引用clipboard.js
复制内容到剪贴板
程序代码

<script src="https://github.com/zenorocha/clipboard.js/blob/master/dist/clipboard.min.js"></script>
二、clipboard.js使用示例
1、从另一个元素复制文本:
复制内容到剪贴板
程序代码

<!-- target -->
<input id="foo" value="hello,clipboard.">
<!-- trigger -->
<button class="btn1" data-clipboard-target="#foo">复制到剪贴板</button>
<script>new ClipboardJS('.btn1');</script>
<input id="foo" value="hello,clipboard.">
<!-- trigger -->
<button class="btn1" data-clipboard-target="#foo">复制到剪贴板</button>
<script>new ClipboardJS('.btn1');</script>
或:
复制内容到剪贴板
程序代码

<!-- target -->
<input id="foo" value="hello,clipboard.">
<!-- trigger -->
<button class="btn1">复制到剪贴板</button>
<script>
new ClipboardJS('.btn1', {
target: function(trigger) {
return document.getElementById('foo');
}
});
</script>
<input id="foo" value="hello,clipboard.">
<!-- trigger -->
<button class="btn1">复制到剪贴板</button>
<script>
new ClipboardJS('.btn1', {
target: function(trigger) {
return document.getElementById('foo');
}
});
</script>
2、从属性复制文本:
复制内容到剪贴板
程序代码

<button id="btn1" data-clipboard-text="hello,clipboard.">复制到剪贴板</button>
<script>new ClipboardJS(document.getElementById('btn1'));</script>
<script>new ClipboardJS(document.getElementById('btn1'));</script>
或:
复制内容到剪贴板
程序代码

<button id="btn1">复制到剪贴板</button>
<script>
new ClipboardJS(document.getElementById('btn1'), {
text: function(trigger) {
return "hello,clipboard.";
}
});
</script>
<script>
new ClipboardJS(document.getElementById('btn1'), {
text: function(trigger) {
return "hello,clipboard.";
}
});
</script>
如果data-clipboard-text的值是动态赋值且比较耗时,可能导致复制的结果不正确,下边是我想到的一种解决方案:
复制内容到剪贴板
程序代码

<button class="btn1" style="display: none;" data-clipboard-text=""></button>
<script>new ClipboardJS(".btn1");</script>
<button id="todo">复制到剪贴板</button>
<script>
$(document).ready(function(){
$("#todo").click(function(){
//todo...
let text = (new Date()).getTime();
$(".btn1").attr("data-clipboard-text", text);
$(".btn1").click();
});
});
</script>
<script>new ClipboardJS(".btn1");</script>
<button id="todo">复制到剪贴板</button>
<script>
$(document).ready(function(){
$("#todo").click(function(){
//todo...
let text = (new Date()).getTime();
$(".btn1").attr("data-clipboard-text", text);
$(".btn1").click();
});
});
</script>
3、监听success和error事件反馈复制结果:
复制内容到剪贴板
程序代码

<button id="btn1" data-clipboard-text="hello,clipboard.">复制到剪贴板</button>
<script>
var clipboard = new ClipboardJS(document.getElementById('btn1'));
clipboard.on('success', function(e) {
alert("复制成功!");
e.clearSelection();
});
clipboard.on('error', function(e) {
alert("复制失败,按 Ctrl+C 复制文字。");
});
</script>
<script>
var clipboard = new ClipboardJS(document.getElementById('btn1'));
clipboard.on('success', function(e) {
alert("复制成功!");
e.clearSelection();
});
clipboard.on('error', function(e) {
alert("复制失败,按 Ctrl+C 复制文字。");
});
</script>
参考资料
[1].clipboard.js中文网:http://www.clipboardjs.cn/
评论: 0 | 引用: 0 | 查看次数: 2657
发表评论
请登录后再发表评论!