当前位置：首页 > JavaScript

js 实现剪切

2026-02-02 09:09:50JavaScript

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

传统方法通过 document.execCommand('cut') 实现剪切，但此 API 已逐渐被废弃，仅在部分旧浏览器中可用。需确保操作在用户交互（如点击事件）中触发。

js 实现剪切

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

// 示例：点击按钮剪切文本
document.getElementById('cutBtn').addEventListener('click', () => {
  cutText('要剪切的文本');
});

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

现代浏览器推荐使用 Clipboard API 的 writeText 方法写入剪贴板，再手动清除原文本。需注意权限问题（需用户触发）。

js 实现剪切

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

// 示例：剪切输入框内容
document.getElementById('cutBtn').addEventListener('click', async () => {
  const input = document.getElementById('inputField');
  await cutTextModern(input.value, input);
});

处理富文本内容的剪切

若需剪切富文本（如带格式的 HTML），可通过 Clipboard API 的 write 方法实现。

async function cutRichText(html) {
  const blob = new Blob([html], { type: 'text/html' });
  const clipboardItem = new ClipboardItem({ 'text/html': blob });
  try {
    await navigator.clipboard.write([clipboardItem]);
  } catch (err) {
    console.error('富文本剪切失败:', err);
  }
}

兼容性注意事项

传统方法：document.execCommand 兼容旧版浏览器，但可能在新版本中失效。
Clipboard API：需检查 navigator.clipboard 是否存在，部分浏览器（如 Safari）可能限制非安全上下文（非 HTTPS）的访问。
用户交互：所有剪贴板操作必须由用户手势（如点击）触发，否则可能抛出异常。

完整示例代码

以下是一个兼容传统和现代方法的完整实现：

async function cutText(text, element) {
  if (navigator.clipboard) {
    try {
      await navigator.clipboard.writeText(text);
      element.value = '';
    } catch (err) {
      fallbackCutText(text);
    }
  } else {
    fallbackCutText(text);
  }
}

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

// 使用示例
document.getElementById('cutBtn').addEventListener('click', () => {
  const input = document.getElementById('inputField');
  cutText(input.value, input);
});

标签: js