今天做一个html复制剪贴板功能,只记得以前做过这个功能,用的是独立的js库Zero Clipboard,由于现在浏览器的更新,以及用户体验的提升,flash已经不再实用,而这种复制功能必须要有flash的支持,果断找其它的替换方案
clipboard.js就能实现纯html的复制
取代flash复制到剪切板,更好页面性能,不会造成卡顿想象,不止兼容PC端,还优雅的兼容移动端ios的safari浏览器,类似于下面的这种效果:

官方文档及下载地址:https://clipboardjs.com/
浏览器兼容

简单使用说明
1、在你的要做复制功能的页面引入核心js文件clipboard.js或clipboard.min.js
<script type="text/javascript" src="script/clipboard.min.js"></script>
2、绑定要操作的元素
<script>
var clipboard = new ClipboardJS('.copy', {
text: function() {
return '复制的文档'; // 这里返回的是要复制的文字 你可以写死,也可以去获取,例如 $(".text").val();
}
});
clipboard.on('success', function(e) {
layer.msg("复制成功");
});
clipboard.on('error', function(e) {
layer.msg("复制失败");
});
</script>
其中copy就是对应的class=“copy”元素
其它功能
1、复制元素结点内容
<div id="btn" data-clipboard-text="1">
<span>Copy</span>
</div>
<script>
var btn = document.getElementById('btn');
var clipboard = new ClipboardJS(btn);
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
2、多个元素同时绑定
<!-- 1. Define some markup -->
<button class="btn" data-clipboard-text="1">Copy</button>
<button class="btn" data-clipboard-text="2">Copy</button>
<button class="btn" data-clipboard-text="3">Copy</button>
<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard by passing a string selector -->
<script>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
3、指定要复制的元素
<!-- 1. Define some markup -->
<button class="btn">Copy</button>
<div>hello</div>
<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard -->
<script>
var clipboard = new ClipboardJS('.btn', {
target: function() {
return document.querySelector('div');
}
});
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
还可以通过属性绑定到元素
还可轻松绑定到各种元素,例如input、textarea等
文件来源:https://www.tpframe.com/posts/93.html 原创文件,转载请注明出处