js 实现剪切
使用 document.execCommand 方法（已废弃但部分浏览器仍支持）
function copyToClipboard(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
}此方法通过创建临时 textarea 元素，选中文本后执行 copy 命令，最后移除临时元素。虽然 execCommand 已被废弃，但在许多浏览器中仍能工作。
使用现代 Clipboard API
async function copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text);
console.log('文本已复制到剪贴板');
} catch (err) {
console.error('无法复制文本: ', err);
}
}Clipboard API 是现代浏览器推荐的方式，需要 HTTPS 环境或在本地开发时使用。调用时需要处理 Promise。
实现剪切功能（复制+删除）
async function cutToClipboard(element) {
const text = element.value || element.textContent;
try {
await navigator.clipboard.writeText(text);
element.value = ''; // 清空输入框
// 或对于可编辑元素：
// element.textContent = '';
} catch (err) {
console.error('剪切失败: ', err);
}
}剪切操作实际上是复制加删除的组合，根据元素类型（输入框或可编辑元素）清空内容。
处理权限问题
现代 Clipboard API 可能因权限问题失败，可以添加用户手势触发：
button.addEventListener('click', async () => {
try {
await navigator.clipboard.writeText('要剪切的文本');
input.value = ''; // 清空源
} catch (err) {
// 降级方案
const textarea = document.createElement('textarea');
textarea.value = input.value;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
input.value = '';
}
});注意事项
- 现代方法需要 HTTPS 或 localhost 环境
- 某些浏览器可能限制未用户触发的剪贴板访问
- 对于富文本内容，可使用
navigator.clipboard.write()写入 HTML - 始终提供错误处理，考虑浏览器兼容性
以上方法覆盖了从传统到现代的 JavaScript 剪切实现方案，可根据具体需求选择适当的方法。
