Online notes favinavi - online bookmark

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

by: fanshome 2023-05-19 16:53(UTC)

Demo

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

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

CSSCopy codes

.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;
}

htmlCopy codes

页面需要采用https协议才能运行<br/>
<button class='copyBtn' onclick='copyText()'>点击复制</button>

javascriptCopy codes

function copyText(){
	let t="需要被复制的文本内容";
	navigator.clipboard.writeText(t).then(()=>{
		alert("复制成功");
	},()=>{
		alert("复制失败");
	})
}

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

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

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

1730

favinavi - for heavy web user Online notes

php/javascript的一些关于时间处理的函数
记录一些经常用到的时间处理函数以备用。
搭建家庭用服务器全套攻略，300元一台小主机全部搞定
有些人闲不住，喜欢折腾，业余时间想自己搭个网站，或者更简单点，想自己折腾个软路由、NAS什么的，那么，这篇文章可能对你有所帮助。一、硬件选型：一般而言，...
无法明确指定大图的宽度width和height时，如何避免累计布局位移CLS?
累计布局偏移: Cumulative Layout Shift, 简称CLS，是一项web性能的重要指标，旨在避免页面渲染时，某些元素（比如图片、字体等）加载前...
An example of increasing productivity with the Favinavi web favorites sharing feature
Favinavi’s humanized network favorites provides a sharing function, that is, u...
简洁有效地实现水平垂直双居中
同时实现水平和垂直方向双居中的方法网上有很多种，本人倾向于采用其中最简洁有效的方法来实现，具有比较好的通用性。具体实现的css代码如下：
网站开发测试环境启用https，使用自签发ssl证书不是个好主意
如题，即使你折腾了一圈把自签发证书安装好了，最后一步还是会遇到浏览器不认证书的问题（比如最新版的chrome），即便你已经添加了“信任此根证书颁发机构”。带着“...