本文介绍如何使用轻量级 JavaScript 库 clipboard.js 在网页中实现文本复制与剪切功能。该方案无需依赖 Flash 或 jQuery 等大型库，通过 HTML5 data 属性即可配置目标元素。文章详细解析了 HTML 结构配置、JavaScript 初始化及成功回调处理，提供完整源码示例，帮助开发者快速集成现代剪贴板交互功能。
效果展示如下：
clipboard.js 简介与优势
在网页中放置一个复制按钮，旨在方便用户复制链接等复杂文本。传统实现方式通常依赖 Flash 技术或引入 jQuery 等庞大的 JavaScript 库。本文介绍一款现代、轻量且无需 Flash 及其他 JS 库支持的插件——clipboard.js。
查看演示 下载源码
HTML 配置与属性详解
HTML 部分
首先需加载本地的 clipboard.js 文件。
代码如下:
<script src="clipboard.min.js"></script>接着在 body 标签内添加需要复制或剪切的文本域内容及对应的按钮。
代码如下:
<input id="foo" value="https://www.jb51.net/demo/clipboard/">
<button class="btn" data-clipboard-target="#foo" aria-label="复制成功！">复制</button>此处利用 HTML5 的 data 属性定位复制对象的目标元素，指向文本域 #foo，表示复制 #foo 中的 value 属性值。aria-label 属性定义了操作成功后的提示信息，用于向用户反馈复制结果。
此外，还有一个 data-clipboard-action 属性用于定义操作类型是复制还是剪切，默认值为复制。当设置 data-clipboard-action="cut" 时，点击按钮将执行剪切操作，效果类似于 Word 软件中的剪切功能。需要注意的是，剪切操作仅适用于 text 和 textarea 元素。
若无需依赖 input 或 textarea 等元素的内容作为复制对象，可通过 data-clipboard-text 属性直接在按钮上定义要复制的文本内容。点击按钮即可将 data-clipboard-text 对应的内容复制到剪贴板。
代码如下:
<button class="btn" data-clipboard-text="这里是要复制的内容" aria-label="复制成功！">复制</button>JavaScript 初始化与回调处理
JavaScript 部分
将以下代码添加到 </body> 标签前的 script 中，保存后在浏览器打开，点击按钮即可实现复制功能。
new Clipboard('.btn');
若需进一步优化用户体验，例如在复制完成后显示更友好的提示信息，可执行以下代码进行增强处理：
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
var msg = e.trigger.getAttribute('aria-label');
alert(msg);
e.clearSelection();
}); 以上内容为小编分享的关于不依赖 Flash 和 JS 库实现文本复制与剪切的功能及源码下载，希望对大家有所帮助。