将文本复制到剪贴板难度并不是很大, 但最重要的是,它不应该依赖于 Flash 或任何臃肿的框架,这就是 clipboard.js 存在的原因。
安装
// 官网地址:https://clipboardjs.com/
npm install clipboard --save
使用
1、复制输入框的值
<!-- 被复制的目标 -->
// value值就是被复制的内容
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- 点击触发 -->
// data-clipboard-target指定被复制的目标
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
<script>
new ClipboardJS('.btn')
</script>
2、剪切输入框的值
<!-- 被剪切的目标 -->
// value值就是被复制的内容
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- 点击触发 -->
// data-clipboard-target指定被剪切的目标
// data-clipboard-action为cut指定剪切,默认是copy
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>
<script>
new ClipboardJS('.btn')
</script>
3、复制其它dom上的值
// data-clipboard-text指定被复制或剪切的内容
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
<script>
new ClipboardJS('.btn')
</script>
是不是比较简单
觉得效果不错的请帮忙加个关注点个赞,经常分享前端实用开发技巧