clipboard.js 一款简单好用的将文本复制到剪贴板的现代方法

作者:J.sky · 发表于:
2023-06-08T18:51:26.000000Z
· 更新于:
2023-08-13T22:54:57.616618Z
· Tag: JavaScript库和框架

复制文本到剪贴板本应该不难。它不应该需要配置的繁琐步骤或大量的加载空间。最重要的是,它不应该依赖于Flash或任何臃肿的框架。

简介

今天开发的时候遇到一个功能,就是把浏览器input组件中的文本复制到剪贴板,当时大概觉得应该会有现成的库类,所以一搜索,就搜到了:clipboard.jsclipboard.js是一个轻量级的 JavaScript 库,用于简化在网页中执行复制操作到剪贴板的过程。它没有依赖于任何第三方库或插件,仅仅使用原生的JavaScript。

使用 clipboard.js,您可以通过几行代码实现将文本、HTML 或其他数据复制到剪贴板。它提供了一种简单而一致的方式来处理跨浏览器的剪贴板操作,避免了处理各种浏览器兼容性问题的烦恼。

使用方法

  1. 引入CDN:

  2. 绑定按钮的DOM:

    new ClipboardJS('.btn');

  3. HTML代码:

复制input中的字符:

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

复制textarea中的字符:

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

嗯,就是这么简单,不要重复造轮子,很浪费时间的:)