前端有弹出框无法复制到剪贴板的问题
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 */
})
最后
当然,你也可以点击这里试试在下的包。