js 实现剪切板

使用 Clipboard API 实现复制和剪切

现代浏览器支持 Clipboard 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 方法（已废弃但广泛支持）

虽然已废弃，但许多浏览器仍支持此方法。

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

  try {
    const successful = document.execCommand('copy');
    const msg = successful ? '成功' : '失败';
    console.log('复制操作' + msg);
  } catch (err) {
    console.error('无法复制文本: ', err);
  }

  document.body.removeChild(textarea);
}

实现剪切功能

剪切操作通常需要先复制再删除原内容。

async function cutToClipboard(elementId) {
  const element = document.getElementById(elementId);
  try {
    await navigator.clipboard.writeText(element.value || element.textContent);
    element.value = ''; // 清空输入框
    // 或对于内容可编辑元素
    // element.textContent = '';
    console.log('内容已剪切到剪贴板');
  } catch (err) {
    console.error('剪切操作失败: ', err);
  }
}

处理权限问题

Clipboard API 可能需要用户授权，特别是在读取剪贴板内容时。

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

兼容性处理

为兼容不同浏览器，可以结合多种方法。

function copyTextFallback(text) {
  if (navigator.clipboard) {
    return navigator.clipboard.writeText(text);
  } else {
    return new Promise((resolve, reject) => {
      try {
        copyTextToClipboard(text);
        resolve();
      } catch (e) {
        reject(e);
      }
    });
  }
}

响应剪贴板变化

可以监听剪贴板内容变化。

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

注意：Clipboard API 要求页面通过 HTTPS 提供服务（localhost 除外），且某些操作可能需要用户交互（如点击事件）才能触发。