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 剪切实现方案，可根据具体需求选择适当的方法。