怎么让网页可以复制粘贴修改代码（网页中如何实现点击按钮将文本复制到剪贴板）
构建网站时经常会用到将文本复制到剪贴板的需求，下面是常用做法，兼容旧版浏览器，现在小编就来说说关于怎么让网页可以复制粘贴修改代码?下面内容希望能帮助到你，我们来一起看看吧!
怎么让网页可以复制粘贴修改代码
构建网站时经常会用到将文本复制到剪贴板的需求，下面是常用做法，兼容旧版浏览器。
- 创建<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.');
};
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
