复制到剪切板

最新推荐文章于 2025-06-16 17:15:54 发布

原创最新推荐文章于 2025-06-16 17:15:54 发布 · 446 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #javascript #html

本文介绍了如何使用JavaScript在满足安全条件（HTTPS或localhost）下，通过`navigator.clipboard`实现文本的复制功能，同时提到了`document.execCommand`的弃用情况。

let url = data;
let oInput = document.createElement('input');
oInput.value = url;
document.body.appendChild(oInput);
oInput.select(); // 选择对象;
let text = oInput.value;
if(navigator.clipboard && window.isSecureContext) {
	// navigator clipboard 向剪贴板写文本
	navigator.clipboard
    .writeText(text)
    .then(() => {
        this.$message({
          message: '复制成功',
          type: 'success'
        });
        oInput.remove()
    })
    .catch(() => {
        this.$message({
          message: '复制失败',
          type: 'error'
        });
        oInput.remove()
    })
}else {
	document.execCommand("Copy"); // 执行浏览器复制命令、
	 this.$message({
      message: '复制成功',
      type: 'success'
    });
    oInput.remove()
}

document.execCommand 已弃用，navigator.clipboard打印undefined，只有在安全域名下才可以访问(https、localhost)，在http域名下只能得到undefined；