js 实现剪切

使用 document.execCommand 方法实现剪切

document.execCommand 是传统的剪贴板操作方法，兼容性较好但已逐渐被现代 API 替代。

function cutTextUsingExecCommand(elementId) {
  const element = document.getElementById(elementId);
  element.select();
  document.execCommand('cut');
}

该方法会剪切选中文本或输入框内容到剪贴板。

使用现代 Clipboard API 实现剪切

Clipboard API 提供了更现代的剪贴板操作方式，需用户授权。

async function cutTextUsingClipboardAPI(elementId) {
  const element = document.getElementById(elementId);
  const text = element.value || element.textContent;

  try {
    await navigator.clipboard.writeText(text);
    element.value = ''; // 清空输入框或元素内容
  } catch (err) {
    console.error('剪切失败:', err);
  }
}

需注意浏览器权限问题，通常在安全上下文（如 HTTPS）中可用。

实现自定义 UI 的剪切操作

若需自定义剪切按钮或交互逻辑，可结合事件监听：

document.getElementById('cutButton').addEventListener('click', () => {
  const input = document.getElementById('textInput');
  input.select();
  document.execCommand('cut'); // 或使用 Clipboard API
});

注意事项

• execCommand 已废弃，但在部分旧浏览器中仍可使用。
• Clipboard API 需要用户主动触发（如点击事件），否则会报权限错误。
• 移动端兼容性需额外测试，部分 API 可能受限。