当前位置：首页 > JavaScript

js实现复制粘贴

2026-04-04 00:26:53JavaScript

实现复制文本到剪贴板

使用 document.execCommand 方法（已废弃但仍有广泛支持）：

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

使用现代 Clipboard API（推荐）：

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

实现从剪贴板粘贴文本

使用 Clipboard API 读取文本：

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

处理权限问题

现代浏览器要求页面处于活动状态（用户点击等交互）才能访问剪贴板：

button.addEventListener('click', async () => {
  try {
    const permission = await navigator.permissions.query({
      name: 'clipboard-read'
    });
    if (permission.state === 'granted') {
      const text = await pasteFromClipboard();
      // 处理粘贴的文本
    }
  } catch (error) {
    console.error('权限请求失败:', error);
  }
});

兼容性处理

检测浏览器支持情况：

function isClipboardAPISupported() {
  return !!navigator.clipboard && 
         typeof navigator.clipboard.writeText === 'function' &&
         typeof navigator.clipboard.readText === 'function';
}

if (!isClipboardAPISupported()) {
  // 回退到传统方法
  document.getElementById('copyBtn').onclick = function() {
    copyToClipboardLegacy('要复制的文本');
  };
}

实际应用示例

复制按钮点击事件：

document.getElementById('copyBtn').addEventListener('click', () => {
  const textToCopy = document.getElementById('textInput').value;
  copyToClipboard(textToCopy);
});

粘贴按钮点击事件：

js实现复制粘贴

document.getElementById('pasteBtn').addEventListener('click', async () => {
  const pastedText = await pasteFromClipboard();
  document.getElementById('output').value = pastedText;
});