当前位置：首页 > JavaScript

js实现剪切板

2026-01-30 15:56:48JavaScript

使用 Clipboard API 实现剪切板操作

Clipboard API 是现代浏览器提供的原生 API，支持读写剪切板内容，具有较好的兼容性和安全性。

// 写入文本到剪切板
async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('内容已复制到剪切板');
  } catch (err) {
    console.error('复制失败:', err);
  }
}

// 从剪切板读取文本
async function readFromClipboard() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('剪切板内容:', text);
    return text;
  } catch (err) {
    console.error('读取剪切板失败:', err);
  }
}

使用 document.execCommand 方法（已废弃但仍有兼容性）

这种方法适用于需要兼容旧浏览器的场景，但已被标记为废弃。

js实现剪切板

function copyToClipboardFallback(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();

  try {
    const successful = document.execCommand('copy');
    if (!successful) throw new Error('复制失败');
    console.log('内容已复制到剪切板');
  } catch (err) {
    console.error('复制失败:', err);
  } finally {
    document.body.removeChild(textarea);
  }
}

处理权限问题

现代浏览器对剪切板访问有严格权限控制，可能需要用户授权。

js实现剪切板

// 检查剪切板读取权限
async function checkClipboardPermission() {
  const permissionStatus = await navigator.permissions.query({
    name: 'clipboard-read'
  });
  return permissionStatus.state; // 'granted', 'denied', or 'prompt'
}

监听剪切板变化

可以监听剪切板内容变化事件（需要浏览器支持）。

navigator.clipboard.addEventListener('clipboardchange', (event) => {
  console.log('剪切板内容已改变');
});

复制富文本内容

如需复制带格式的内容，可以使用 ClipboardItem 对象。

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

  try {
    await navigator.clipboard.write([clipboardItem]);
    console.log('富文本内容已复制');
  } catch (err) {
    console.error('复制富文本失败:', err);
  }
}