有三种方法实现在浏览器的复制, 剪贴, 粘贴的操作
document.execCommand
实现具有兼容性和易实现的优点, 缺点嘛... MDN是这么说的: 已弃用Clipboard
对象
基于异步并且功能强大, 但部分浏览器不支持ClipboardJS
第三方库
实现简单, 有一定的兼容性
选择哪个方法实现?
我个人的话选择写代码最少的那个(╹ڡ╹ ), 即第三方库 ClipboardJS
ClipboardJS
官方文档: https://clipboardjs.com/
这个库的使用非常简单, 网页引入 clipboard.min.js
先用 ClipboardJS
选中你需要触发的按钮
new ClipboardJS(".btn")
然后在需要设置复制相关功能的的按钮上添加指定的 HTML5 数据属性 即可
就这样, <input>
标签内的文本就写入到系统的剪贴板了
<!-- 目标input标签 -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- 触发器-->
<button class="btn" data-clipboard-target="#foo"></button>
要想剪贴文本, 再在 <button>
标签中添加属性 data-clipboard-action="cut"
即可
不过要注意, 这些快捷方法仅适用于 <input>
标签
更多用法可以去看看官方文档(说是文档, 其实就一页>﹏<)