execCommand替代方案Clipboard，实现JS复制到剪贴板

最新推荐文章于 2025-05-28 16:19:05 发布

落叶上的秋

最新推荐文章于 2025-05-28 16:19:05 发布

阅读量7.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 开发语言

本文链接：https://blog.youkuaiyun.com/huanglgln/article/details/122046132

本文介绍两种网页内容复制的方法：使用execCommand直接操作浏览器命令及利用Clipboard API实现更安全的复制功能。Clipboard API需要在安全上下文中运行，如HTTPS环境下，并且通常在用户交互事件中触发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、execCommand实现方式

$("#buttonId").click(function(){
    var input = document.createElement("input");
    input.value = E_CARD_NO;
    document.body.appendChild(input);
    input.select();
    input.setSelectionRange(0, input.value.length);
    document.execCommand('Copy');
    document.body.removeChild(input);
    alert("复制成功！");
});

2、Clipboard实现方式

如果你把上面的代码，粘贴到F12开发者工具里面运行，就会报错。因为代码运行的时候，开发者工具窗口是当前页，这个页面不存在 Clipboard API 依赖的 DOM 接口。一个解决方法就是，相关代码放到setTimeout()里面延迟运行，在调用函数之前快速点击浏览器的页面窗口，将其变成当前页。

settimeout(function(){
	navigator.clipboard.writeText("<empty clipboard>").then(function() {
	  /* clipboard successfully set */
	}, function() {
	  /* clipboard write failed */
	});
}, 3000);

ios必须在点击事件中显示触发，并且需要https等安全上下文

//正确写法，输出“复制成功”
$("#buttonId").click(function(){
	// navigator clipboard 需要https等安全上下文
	if (navigator.clipboard && window.isSecureContext) {
		// navigator clipboard 向剪贴板写文本
		navigator.clipboard.writeText("aaaaa").then(function() {
	        alert("复制成功");
	    }, function() {
	        alert("复制失败");
	    });
	}
});

//错误写法，输出“复制失败”
window.onload=function(){
    navigator.clipboard.writeText("aaaaa").then(function() {
	    alert("复制成功");
	}, function() {
	   alert("复制失败");
	});
}

//错误写法，输出“复制失败”
$("#buttonId").click(function(){
    settimeout(function(){
        navigator.clipboard.writeText("aaaaa").then(function() {
	        alert("复制成功");
	    }, function() {
	       alert("复制失败");
	    });
    },1000);
})

其他可以参考阮一峰大神：https://www.ruanyifeng.com/blog/2021/01/clipboard-api.html

官方API文档： Clipboard - Web APIs | MDN