js复制、粘贴完整实例代码

原创于 2023-02-13 23:19:35 发布 · 2.3k 阅读

CC 4.0 BY-SA版权

文章标签：

文章介绍了如何使用浏览器的clipboardAPI来实现无插件的复制粘贴功能，强调了API的异步特性、安全性以及对不同内容类型的处理能力。同时，文章提供了代码示例，展示了如何在JavaScript中实现复制和粘贴操作，并提到了浏览器的支持情况和使用限制。

前端哥最近在做在线工具箱，用到了js复制、粘贴的功能，刚好现在有时间就记录下来，避免将来需要用到时候随机可查阅，同时也希望帮助到各位正在学习的前端小伙伴们

前端哥用到的是浏览器自带clipboard API实现复制粘贴：

我先大概的介绍一下clipboard API，无需引入任何第三方插件，原生js实现

ClipboardAPI是下一代的剪贴板操作方法，比传统的document.execCommand()方法更加强大、更合理。

特点

（1）它的所有操作都是异步进行的，返回promise对象，不糊造成页面卡顿，

（2）它可以将任何内容（例如图片）放入到剪贴板。

（3）安全。通过navigator.clipboard属性返回Clipboard对象，所有操作都通过这个对象进行，如果navigator.clipboard属性返回undefined，就说明当前浏览器不支持这个API。

1）有时候用户可能会把敏感数据（比如密码）放在剪贴板允许脚本任意读取会产生风险，而通过Clipboard对象进行判断，则很好的避免了这个风险。

2）此外，有些浏览器规定（例如Chrome），只有HTTPS协议的页面才能使用这个API（不过开发环境下、本地允许使用非加密协议）

3）其次，复制权限是用户默认赋予的，而粘贴权限是需要用户手动同意的，例如，在写入剪贴板时脚本可以自动完成，但是读取剪贴板时，浏览器会弹出一个对话框咨询用户是否同意读取。

4）有一点需要特别注意，脚本读取的是当前页面的剪切板（注意我说的是浏览器中的剪贴板，而不是电脑操作系统自带的剪贴板），这带来一个问题，如果想把相关的代码粘贴到开发者工具中直接运行，可能会报错，因为这时的当前页面是开发者工具的窗口，而不是网页页面。

demo效果图：
在这里插入图片描述
接下来就是最重要的干货部分了，代码如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>js复制粘贴完整案例——前端哥</title>
	</head>
	<body>
		<h1 style="text-align: center;">js复制粘贴完整案例——前端哥</h1>
		<div style="width: 320px; margin: 30px auto 0px auto;">
			<!-- Target -->
			<input type="text" id="foo" placeholder="要复制的内容" value="" />

			<!-- Trigger -->
			<button class="btn" id="copy">复制</button>
			原文地址：https://www.qianduange.cn/qianduanzhishi/qianduanjiaoliu/87.html
			<br>
			<input type="text" id="pastevalue" placeholder="这里是粘贴的内容" />
			<!-- Trigger -->
			<button class="paste" id="paste">粘贴</button>
		</div>
		<script>
			//点击复制事件
			document.getElementById("copy").onclick = function() {
				let copyval = document.getElementById("foo").value;
				console.log("复制的内容：" + copyval);
				copyText(copyval);
			};

			//复制事件
			function copyText(text) {
				var textarea = document.createElement("textarea");
				var currentFocus = document.activeElement;
				document.body.appendChild(textarea);
				textarea.value = text;
				textarea.focus();
				if (textarea.setSelectionRange)
					textarea.setSelectionRange(0, textarea.value.length);
				else
					textarea.select();
				try {
					var flag = document.execCommand("copy");
				} catch (eo) {
					var flag = false;
				}
				document.body.removeChild(textarea);
				currentFocus.focus();
				return flag;
			}


			//粘贴
			document.getElementById("paste").onclick = function() {
				paste();
			};
			async function paste() {
				try {
					const text = await navigator.clipboard.readText();
					document.getElementById("pastevalue").value = text;
				} catch (err) {
					console.log("粘贴失败！", err);
				}
			};
		</script>
	</body>
</html>