当前位置：首页 > JavaScript

js实现剪切

2026-02-01 00:20:51JavaScript

使用 `document.execCommand` 实现剪切（传统方法）

传统方法通过 document.execCommand('cut') 实现剪切操作，但此 API 已逐渐被废弃，仅部分旧浏览器支持。

js实现剪切

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

使用 Clipboard API 实现剪切（现代方法）

现代浏览器推荐使用 Clipboard API 的 writeText() 方法写入剪贴板，再手动清除原内容。

js实现剪切

async function cutTextModern(text, element) {
  try {
    await navigator.clipboard.writeText(text);
    element.value = ''; // 清空原输入框内容（模拟剪切效果）
  } catch (err) {
    console.error('剪切失败:', err);
  }
}

完整示例（结合 DOM 操作）

以下是一个完整的实现，包含文本框和剪切按钮的交互：

<input type="text" id="inputField" value="要剪切的文本">
<button id="cutButton">剪切</button>

<script>
  document.getElementById('cutButton').addEventListener('click', async () => {
    const inputField = document.getElementById('inputField');
    const text = inputField.value;

    try {
      await navigator.clipboard.writeText(text);
      inputField.value = ''; // 清空文本框
    } catch (err) {
      console.error('剪切失败:', err);
    }
  });
</script>

注意事项

权限问题：Clipboard API 需要用户授权，通常在安全上下文（HTTPS 或 localhost）中自动授予。
兼容性：传统方法在 IE 和旧 Edge 中有效，但现代浏览器应优先使用 Clipboard API。
错误处理：始终捕获剪贴板操作的潜在错误（如用户拒绝权限）。

扩展：剪切非文本内容

如需剪切 HTML 或富文本内容，可使用 Clipboard API 的 write() 方法：

async function cutHTML(htmlContent, element) {
  const clipboardItem = new ClipboardItem({
    'text/html': new Blob([htmlContent], { type: 'text/html' })
  });

  await navigator.clipboard.write([clipboardItem]);
  element.innerHTML = ''; // 清空原内容
}

标签: js