当前位置：首页 > JavaScript

js实现剪切

2026-04-05 16:41:57JavaScript

使用 `document.execCommand` 方法（传统方式）

传统方式通过调用 document.execCommand('cut') 实现剪切操作。此方法需要文本处于选中状态。

function cutTextUsingExecCommand(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('cut');
  document.body.removeChild(textarea);
}

注意：execCommand 已逐渐被废弃，仅在部分旧浏览器中可用。

使用 Clipboard API（现代方式）

现代浏览器推荐使用 Clipboard API 的 writeText 方法实现剪切。需先复制文本，再清空原内容。

async function cutTextUsingClipboardAPI(text, sourceElement) {
  try {
    await navigator.clipboard.writeText(text);
    sourceElement.value = ''; // 清空原内容（如 input/textarea）
  } catch (err) {
    console.error('剪切失败:', err);
  }
}

要求：需用户授权剪贴板权限（通常在安全上下文中自动触发）。

结合选中区域实现精准剪切

若需剪切页面中特定元素的文本内容，可通过 Selection API 选中文本后调用剪切命令。

function cutSelectedText(element) {
  const range = document.createRange();
  range.selectNodeContents(element);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
  document.execCommand('cut');
  selection.removeAllRanges();
}

适用场景：动态选中 DOM 节点中的文本内容。

兼容性处理

旧版浏览器可尝试降级方案，例如先复制再手动删除原内容：

js实现剪切

async function fallbackCut(text, sourceElement) {
  if (navigator.clipboard) {
    await navigator.clipboard.writeText(text);
  } else {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
  }
  sourceElement.value = '';
}