龙空技术网

网页中如何实现点击按钮将文本复制到剪贴板?

理想世界的梦 106

前言:

现在咱们对“clipboard copy”可能比较注重,大家都想要了解一些“clipboard copy”的相关文章。那么小编同时在网上搜集了一些对于“clipboard copy””的相关知识,希望大家能喜欢,咱们快快来学习一下吧!

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

创建<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.');};

标签: #clipboard copy #html复制到剪贴板 #html点击按钮触发文本内容 #网址复制到剪切板