Contents

前端有弹出框无法复制到剪贴板的问题

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 */
})

最后

当然,你也可以点击这里试试在下的包。