default
menu home
图标库 注册 登录 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 802


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

captcha
请正确填写验证码
取 消