default
menu home
arrow_drop_down
图标库 注册 登录 favorite_border message help_outline
在线笔记 - 人性化网络收藏夹

https协议下javascript复制内容到剪贴板

style分类标签： 全部 CSS html javascript php/other IT
by: fanshome  2023-05-19 16:53(UTC)
演 示

JavaScript复制内容到剪贴板（clipboard）网上教程比较多，大部分使用document.execCommand('copy');的方法。不过，该方法不久将不再被现代浏览器支持，所以需要一个更符合时代的方法。

其实，使用navigator.clipboard方法也很简单，并且一时半会儿不会被淘汰。使用该方法复制文本内容的示例代码如下：

CSScontent_copy复制代码
.copyBtn{
height:24px;font-size:14px;font-weight:normal;line-height:24px;
cursor:pointer;text-align:center;background:#ddd;color:#444;
border-radius:4px;padding:2px 4px;
}
htmlcontent_copy复制代码
页面需要采用https协议才能运行<br/>
<button class='copyBtn' onclick='copyText()'>点击复制</button>
javascriptcontent_copy复制代码
function copyText(){
	let t="需要被复制的文本内容";
	navigator.clipboard.writeText(t).then(()=>{
		alert("复制成功");
	},()=>{
		alert("复制失败");
	})
}

需要注意的是：该方法要成功运行有2个前提条件：

1、用户已同意授权访问剪贴板；

2、页面使用https协议，否则出于浏览器安全规则，将不允许复制。

visibility 1658

- 重度网络用户必备 在线笔记
adimg
logo 发表评论

captcha
请正确填写验证码
取 消