当前位置：首页 > HTML

h5实现点击复制功能

2026-03-06 11:20:30HTML

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

在HTML5中，可以通过document.execCommand('copy')实现点击复制功能。该方法虽然已逐渐被弃用，但在旧浏览器中仍有较好兼容性。

创建一个按钮并绑定点击事件：

<button id="copyBtn">点击复制</button>
<input type="text" id="copyText" value="要复制的文本" style="position:absolute;left:-9999px">

<script>
document.getElementById('copyBtn').addEventListener('click', function() {
  const copyText = document.getElementById('copyText');
  copyText.select();
  document.execCommand('copy');
  alert('已复制: ' + copyText.value);
});
</script>

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

现代浏览器推荐使用更强大的Clipboard API，需要获取用户权限：

<button id="copyBtn">点击复制</button>

<script>
document.getElementById('copyBtn').addEventListener('click', async function() {
  const text = '要复制的文本';
  try {
    await navigator.clipboard.writeText(text);
    alert('复制成功: ' + text);
  } catch (err) {
    console.error('复制失败:', err);
    alert('复制失败，请手动复制');
  }
});
</script>

结合两种方法的兼容方案

为兼顾新旧浏览器，可以优先尝试Clipboard API，失败时回退到execCommand：

<button id="copyBtn">点击复制</button>
<input type="text" id="copyFallback" style="position:absolute;left:-9999px">

<script>
document.getElementById('copyBtn').addEventListener('click', async function() {
  const text = '要复制的文本';

  try {
    if(navigator.clipboard) {
      await navigator.clipboard.writeText(text);
    } else {
      const fallbackInput = document.getElementById('copyFallback');
      fallbackInput.value = text;
      fallbackInput.select();
      document.execCommand('copy');
    }
    alert('复制成功: ' + text);
  } catch (err) {
    console.error('复制失败:', err);
    alert('复制失败，请手动复制');
  }
});
</script>

注意事项

在HTTP协议下某些浏览器可能限制Clipboard API的使用，建议在HTTPS环境下使用
部分浏览器需要用户先与页面交互（如点击按钮）才能允许访问剪贴板
移动端浏览器对剪贴板API的支持可能有差异
可添加视觉反馈（如Toast提示）代替alert提升用户体验

扩展功能：复制富文本内容

如需复制带格式的内容（如HTML），Clipboard API支持写入ClipboardItem对象：

h5实现点击复制功能

async function copyRichText() {
  const htmlContent = '<b>加粗文本</b><i>斜体文本</i>';
  const blob = new Blob([htmlContent], { type: 'text/html' });

  try {
    await navigator.clipboard.write([
      new ClipboardItem({
        'text/html': blob,
        'text/plain': new Blob(['纯文本备用内容'], { type: 'text/plain' })
      })
    ]);
    console.log('富文本复制成功');
  } catch (err) {
    console.error('富文本复制失败:', err);
  }
}

标签: 功能