前端有弹出框无法复制到剪贴板的问题
Contents
产生的原因
大部分复制到剪切板的实现是先创建一个textarea节点，再将其追加到body元素上，然后选中，运行copy命令。具体如下：
const textarea = document.createElement("textarea")
const container = document.querySelector("body")
container.appendChild(textarea)
textarea.value = "text"
textarea.select()
document.execCommand("copy")
container.removeChild(textarea)
但是，但有弹出框时，弹出框会自动focus，而复制的底层实现是要获取选中的内容，失去焦点后就无法获取到了，从而导致复制失败。
如何解决
方案一
既然弹出框会自动focus，那么我们直接将textarea节点追加到弹出框中即可。
const textarea = document.createElement("textarea")
const container = document.querySelector("modal") // 弹出框的Element元素
container.appendChild(textarea)
textarea.value = "text"
textarea.select()
document.execCommand("copy")
container.removeChild(textarea)
方案二
使用clipboard接口的writeText()方法可以写入文本到剪切板。但是对于旧版的浏览器可能存在兼容性的问题。
navigator.clipboard.writeText("text").then(() => {
/* clipboard successfully set */
}, () => {
/* clipboard write failed */
})
最后
当然，你也可以点击这里试试在下的包。