VueJS点击a标签复制文本到剪贴板 隐藏输入框失效如何解决

失效原因 #

display: none属性会让元素完全脱离可交互的渲染树，浏览器无法对其执行select()选中操作，因此复制命令会失效。

解决方案1：视觉隐藏输入框（兼容旧代码，改动最小） #

不要用display: none隐藏输入框，改用将元素移出可视区域的方式，修改copyurl_txt的CSS样式即可：

.copyurl_txt {
  position: absolute;
  left: -99999px;
  top: -99999px;
  opacity: 0;
  pointer-events: none;
}

修改完样式后原有JS逻辑无需任何改动，即可正常执行复制操作。

解决方案2：使用现代Clipboard API（更简洁，无需额外输入框） #

目前所有主流浏览器都支持官方标准Clipboard API，还可以直接删掉冗余的隐藏input标签，直接在方法里写复制逻辑即可：

<script> 
export default {   
methods: {
            async copyURL() {
              // 这里可以替换成你需要动态生成的复制内容，无需依赖input元素
              const targetUrl = "https://mysite.site/"
              try {
                await navigator.clipboard.writeText(targetUrl)
                // 可自行添加复制成功的toast提示
              } catch (err) {
                // 可自行添加复制失败的提示
                console.error('复制失败', err)
              }
            }
          },
};
</script>

注意：Clipboard API仅在HTTPS环境和localhost本地开发环境下可用，符合常规线上项目部署要求。

内容的提问来源于stack exchange，提问作者Veenavi Anutthara