有三种方法实现在浏览器的复制, 剪贴, 粘贴的操作

  • 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> 标签

更多用法可以去看看官方文档(说是文档, 其实就一页>﹏<)

最后修改:2023 年 10 月 28 日
如果觉得我的文章对你有用,请随意赞赏