纯前端实现文本复制与剪切：使用 clipboard.js 无需 Flash 或第三方库

效果展示如下：

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 库实现文本复制与剪切的功能及源码下载，希望对大家有所帮助。