在线笔记 favinavi - 人性化网络收藏夹

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

分类标签：全部 CSS html javascript php/other IT

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

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

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

CSS复制代码

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

html复制代码

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

javascript复制代码

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

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

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

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

1648

favinavi - 重度网络用户必备在线笔记

CSS实现在普通可滚动容器元素内的类似position:fixed悬浮固定按钮效果
有时候，我们需要在某个可滚动（scroll）的元素内实现悬浮固定按钮效果，按钮不能随着鼠标滚动而变化。在全可视窗口实现这个效果（比如顶部的悬浮菜单）比较简单，只...
使用CSS让大背景图片适应不同大小屏幕又一例
这个示例网页使用了一个较大的背景图片，并使用CSS的background-size属性和@media查询来确保这个图片在不同尺寸的终端屏幕上都能够自适应。在小于...
网站开发测试环境启用https，使用自签发ssl证书不是个好主意
如题，即使你折腾了一圈把自签发证书安装好了，最后一步还是会遇到浏览器不认证书的问题（比如最新版的chrome），即便你已经添加了“信任此根证书颁发机构”。带着“...
如何获得高质量网站的外部链接
问了一下chatGPT这个问题，以下是它的回答，供大家参考：获得高质量网站的外部链接是一个需要耐心和投入的过程，以下是几种获得高质量外部链接的方法： 1、...
Ubuntu 22.04 live server更换亚马逊AWS的更新源
amzon亚马逊云AWS的更新源，即使在国内速度也基本可接受，其最大特点是软件丰富，常用软件包几乎没有找不到的。具体步骤如下：
css实现图标或图片等元素镜像翻转（水平镜像、垂直镜像）
有时候会发现现成的图标很美观，但是和一般习惯不同（或者纯粹不符合个人喜好），比如“分享”图标，一般是一个箭头，但是箭头方向感觉和习惯的相反，这时就需要来个水平镜...