js实现右键复制

实现右键复制功能

在JavaScript中实现右键复制功能，可以通过监听contextmenu事件并阻止默认行为，然后使用document.execCommand或Clipboard API来实现复制操作。

监听右键菜单事件

使用addEventListener监听contextmenu事件，并调用preventDefault阻止默认右键菜单弹出：

document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
  // 在这里添加复制逻辑
});

使用execCommand复制文本

execCommand是传统方法，兼容性较好但已逐渐被废弃：

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

document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
  copyText('要复制的文本内容');
});

使用Clipboard API复制文本

现代浏览器推荐使用Clipboard API，它更安全且支持Promise：

async function copyText(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('复制成功');
  } catch (err) {
    console.error('复制失败:', err);
  }
}

document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
  copyText('要复制的文本内容');
});

添加用户反馈

为了更好的用户体验，可以添加复制成功的提示：

function showTooltip(x, y, message) {
  const tooltip = document.createElement('div');
  tooltip.style.position = 'absolute';
  tooltip.style.left = `${x}px`;
  tooltip.style.top = `${y}px`;
  tooltip.style.background = '#333';
  tooltip.style.color = '#fff';
  tooltip.style.padding = '5px 10px';
  tooltip.style.borderRadius = '3px';
  tooltip.textContent = message;
  document.body.appendChild(tooltip);

  setTimeout(() => {
    document.body.removeChild(tooltip);
  }, 1000);
}

document.addEventListener('contextmenu', async function(e) {
  e.preventDefault();
  await copyText('要复制的文本内容');
  showTooltip(e.clientX, e.clientY, '已复制');
});

安全性考虑

Clipboard API在安全上下文中要求页面必须通过HTTPS加载，或localhost开发环境。如果权限被拒绝，需要处理错误情况。

完整示例代码

document.addEventListener('contextmenu', async function(e) {
  e.preventDefault();

  const textToCopy = '这是要复制的文本内容';

  try {
    await navigator.clipboard.writeText(textToCopy);
    showTooltip(e.clientX, e.clientY, '已复制到剪贴板');
  } catch (err) {
    console.error('复制失败:', err);
    showTooltip(e.clientX, e.clientY, '复制失败');
  }
});

function showTooltip(x, y, message) {
  const tooltip = document.createElement('div');
  tooltip.style.position = 'absolute';
  tooltip.style.left = `${x}px`;
  tooltip.style.top = `${y}px`;
  tooltip.style.background = '#333';
  tooltip.style.color = '#fff';
  tooltip.style.padding = '5px 10px';
  tooltip.style.borderRadius = '3px';
  tooltip.style.zIndex = '9999';
  tooltip.textContent = message;
  document.body.appendChild(tooltip);

  setTimeout(() => {
    document.body.removeChild(tooltip);
  }, 1000);
}