构建网站时经常会用到将文本复制到剪贴板的需求,下面是常用做法,兼容旧版浏览器。
- 创建<input>元素,将其值设置为要复制到剪贴板上的字符串。
- 将<input>元素附加到当前 HTML 文档并使用 CSS 将其隐藏以防止闪烁。
- 使用InputElement.select()选择<input>元素的内容。
- 使用Document.execCommand('copy') 将 <input>的内容复制到剪贴板。
- 从文档中删除<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);
};
document.execCommand - Web API 接口参考 | MDN
如果要实现其它高级功能,可以使用现代浏览器的 Clipboard - Web API 接口参考 | MDN
使用
navigator.clipboard.writeText 写入文本至操作系统剪贴板
const copyToClipboard = str => {
if (navigator && navigator.clipboard && navigator.clipboard.writeText)
return navigator.clipboard.writeText(str);
return Promise.reject('The Clipboard API is not avAIlable.');
};