本文详解 JavaScript 中实现剪切、复制和粘贴功能的两种主要方式。重点介绍现代浏览器推荐的 Navigator.clipboard API，包括其权限机制与读写文本的方法；同时涵盖已废弃但仍兼容旧浏览器的 document.execCommand 方案，并提供无需选中内容的两种复制技巧及事件监听实现。
现代浏览器剪贴板 API 实现
针对现代浏览器环境，主要依赖 Navigator.clipboard 接口来实现相关功能。
Navigator.clipboard API 提供了直接访问系统剪贴板的途径，支持剪切、复制和粘贴操作。该接口旨在替代传统的 document.execCommand() 方式，但不兼容 Internet Explorer 浏览器。
调用 Navigator.clipboard API 时，浏览器会触发用户授权弹窗。若用户未授予相应权限，系统将禁止读取或修改剪贴板内容。
let clipBoard = navigator.clipboard;
// 写入文本至操作系统剪贴板
clipBoard.writeText('你好').then(() => {
this.$message.success('复制成功！')
})
// 写入任意数据（比如图片）至操作系统剪贴板用 clipBoard.write()
// 从剪贴板读取文本
clipBoard.readText().then(clipText => {
console.log(clipText);
})
// 从剪贴板读取数据（比如图片）用 clipBoard.read()旧版浏览器兼容方案
对于旧版本浏览器，可通过 document.execCommand 方法实现功能。该接口为可编辑内容区域提供了包括剪切、复制和粘贴在内的多种实用 API。
根据 MDN 文档说明，document.execCommand 方法已被标记为废弃状态。
无需选中的复制技巧
使用 document.execCommand 进行复制操作的前提是必须先选中目标内容。然而，实际开发中常需实现无需用户手动选中的复制效果，例如在手机号旁设置“复制”按钮，点击即复制号码。对此有两种实现方案：
方案一：在 body 元素中动态添加一个隐藏的 textarea 文本域，利用 select() 方法选中其内容，随后调用 document.execCommand('copy') 完成复制。
function copyText (text) {
$('body').append(`<textarea id="iclip-container" value="${text}">${text}</textarea>`);
$('#iclip-container').select();
if (document.execCommand('copy', false, null)) {
$('#iclip-container').remove();
alert('复制成功！')
}
}方案二：监听 copy 事件，在事件回调函数中动态注入需要复制的内容。
function copyText (text) {
const copy = function(event) {
let clipboardData = event.clipboardData || window.clipboardData;
clipboardData.setData('text/plain', text);
event.preventDefault();
};
document.addEventListener('copy', copy);
document.execCommand('copy');
document.removeEventListener('copy', copy);
this.$message.success('复制成功！');
},剪贴板事件监听
关于剪切、复制和粘贴事件的监听机制。
开发者可以为特定元素绑定 cut、copy 和 paste 事件监听器，以捕获并处理用户的剪切、复制和粘贴行为。
// 可以监听 cut 事件对剪切内容进行修改
const source = document.querySelector('div.source');
source.addEventListener('cut', (event) => {
const selection = document.getSelection();
event.clipboardData.setData('text/plain', selection.toString().toUpperCase());
selection.deleteFromDocument();
event.preventDefault();
});至此，关于 JavaScript 实现剪切、复制与粘贴功能的内容介绍完毕。如需了解更多相关技术细节，建议查阅本站历史文章或继续浏览后续内容，感谢支持。