如果有这样的需求:点击一个按钮,复制某个文本的文字到剪贴板以供使用,我们就需要用到一些方法。
在pc上我们复制文本可以使用
document.execCommand('copy');
但是在移动端是不行的。我选用的方案是clipboard,实测效果完美。
在clipboard官网 https://clipboardjs.com 上,有详细的安装使用方法:
我们可以使用npm包,也可以使用cdn。地址:https://github.com/zenorocha/...
我以cnd举例:
<body>
<text class="summary_context">这是我们想要复制的文字<text>
<a href="javascript:;" class="copy_click" data-clipboard-text="123">复制文案</a>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
<script>
const $copyClick = $('.copy_click');
const $summaryContext = $('.summary_context')
$copyClick.addEventListener('touchstart', function() {
let text = $summaryContext.innerText;
$copyClick.setAttribute('data-clipboard-text', text);
let clipboard = new ClipboardJS('.copy_click');
clipboard.on('success', function(e) {
alert('复制成功')
});
clipboard.on('error', function(e) {
alert('复制失败')
});
})
function $(param){
return document.querySelector(param)
}
</script>
<style>
.summary_context{
text-decoration:none;
border:0;
}
</style>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。