前端按钮一键复制剪贴板：真不是一行代码的事！

前端

2023-09-21 13:16:42

导言

提升用户体验的妙招之一，莫过于点击按钮即可将内容自动复制到剪贴板。看似简单的功能，却暗藏玄机，兼容性问题尤为棘手。

实现困境

目前，并无适用于所有浏览器的完美解决方案。主流方法包括：

execCommand('copy')： 仅适用于 Chrome 和 Edge。
document.execCommand('copy')： 兼容性较好，但某些浏览器存在限制。
createTextRange()： 仅适用于 IE。
document.queryCommandSupported()： 兼容性较差，且部分浏览器存在问题。

兼容性陷阱

不同浏览器对这些方法的支持程度不一，导致兼容性问题频发。例如：

Safari 不支持 execCommand('copy')。
Firefox 不允许直接访问剪贴板，需借助第三方库。

实用解决方案

考虑兼容性，可采用以下方案：

检测浏览器支持情况： 使用 document.queryCommandSupported('copy') 判断浏览器是否支持 execCommand('copy')。
使用第三方库： 对于不支持 execCommand('copy') 的浏览器，可引入第三方库，如 clipboard.js 或 copy-to-clipboard.js。
降级处理： 对于不支持任何方法的浏览器，可提供替代方案，如提示用户手动复制。

实现步骤

HTML：

<input type="text" id="text-input" value="要复制的内容" readonly>
<button id="copy-button">复制</button>

JavaScript：

// 检测浏览器支持情况
if (document.queryCommandSupported('copy')) {
  // 使用 execCommand('copy')
  document.addEventListener('click', function (e) {
    if (e.target.id === 'copy-button') {
      const text = document.getElementById('text-input').value;
      document.execCommand('copy');
      alert('已复制到剪贴板');
    }
  });
} else {
  // 使用第三方库
  var clipboard = new ClipboardJS('#copy-button');
}