网页中如何实现点击按钮将文本复制到剪贴板？[通俗易懂]

欢迎大家来到IT世界,在知识的湖畔探索吧!

构建网站时经常会用到将文本复制到剪贴板的需求，下面是常用做法，兼容旧版浏览器。

1. 创建<input>元素,将其值设置为要复制到剪贴板上的字符串。
2. 将<input>元素附加到当前 HTML 文档并使用 CSS 将其隐藏以防止闪烁。
3. 使用InputElement.select()选择<input>元素的内容。
4. 使用Document.execCommand(‘copy’) 将 <input>的内容复制到剪贴板。
5. 从文档中删除<input>元素。

Javascript 代码：

const copyToClipboard = str => {
  const el = document.createElement('input');
  el.value = str;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
};

欢迎大家来到IT世界,在知识的湖畔探索吧!

document.execCommand – Web API 接口参考 | MDN

如果要实现其它高级功能，可以使用现代浏览器的 Clipboard – Web API 接口参考 | MDN

使用 navigator.clipboard.writeText 写入文本至操作系统剪贴板

欢迎大家来到IT世界,在知识的湖畔探索吧!const copyToClipboard = str => {
  if (navigator && navigator.clipboard && navigator.clipboard.writeText)
    return navigator.clipboard.writeText(str);
  return Promise.reject('The Clipboard API is not available.');
};