h5实现一键复制

实现一键复制的H5方法

使用HTML5和JavaScript实现一键复制功能，可以通过以下方式完成：

使用document.execCommand方法（兼容旧浏览器）

创建一个隐藏的textarea元素，将需要复制的文本放入其中，选中并执行复制命令。

<button onclick="copyToClipboard('要复制的文本')">一键复制</button>

<script>
function copyToClipboard(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
  alert('复制成功');
}
</script>

使用Clipboard API（现代浏览器推荐）

Navigator.clipboard.writeText方法提供了更简洁的复制方式，但需要HTTPS环境或localhost。

<button onclick="copyText('要复制的文本')">一键复制</button>

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

添加复制反馈

为了提高用户体验，可以添加复制成功或失败的提示。

function showCopyFeedback(isSuccess) {
  const feedback = document.createElement('div');
  feedback.textContent = isSuccess ? '✓ 复制成功' : '✗ 复制失败';
  feedback.style.position = 'fixed';
  feedback.style.bottom = '20px';
  feedback.style.right = '20px';
  feedback.style.padding = '10px';
  feedback.style.background = isSuccess ? '#4CAF50' : '#F44336';
  feedback.style.color = 'white';
  feedback.style.borderRadius = '4px';
  document.body.appendChild(feedback);

  setTimeout(() => {
    document.body.removeChild(feedback);
  }, 2000);
}

兼容性处理

结合两种方法实现更好的兼容性。

async function copyToClipboard(text) {
  try {
    if (navigator.clipboard) {
      await navigator.clipboard.writeText(text);
    } else {
      const textarea = document.createElement('textarea');
      textarea.value = text;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
    }
    showCopyFeedback(true);
  } catch (err) {
    console.error('复制失败:', err);
    showCopyFeedback(false);
  }
}

注意事项

• 某些浏览器可能需要在用户交互事件中触发复制操作
• Safari浏览器对Clipboard API的支持有限
• 移动端浏览器可能需要特殊处理
• 考虑添加权限请求处理

这些方法可以根据具体需求进行调整和扩展，以适应不同的应用场景。