js 原生js复制到粘贴板

最新推荐文章于 2024-03-19 09:03:37 发布

352328759

最新推荐文章于 2024-03-19 09:03:37 发布

阅读量2.3k

点赞数 1

分类专栏： JavaScript 实际应用文章标签： js复制复制原生

本文链接：https://blog.csdn.net/u013970232/article/details/105516846

版权

JavaScript 同时被 2 个专栏收录

37 篇文章 1 订阅

订阅专栏

实际应用

34 篇文章 1 订阅

订阅专栏

优点

代码少
纯元素JavaScript
无插件
无须服务器

知识点

createTextRange

ie 创建TextRange 对象

createRange

非ie 创建Range 对象

Range 对象

Range 接口表示一个包含节点与文本节点的一部分的文档片段。

document.activeElement

返回文档中当前获得焦点的元素

HTMLInputElement.setSelectionRange(selectionStart, selectionEnd, selectionDirection)

设置文本的选中范围
HTMLInputElement 必须是当前获焦元素
selectionStart, selectionEnd 控制选中文本的开始结束, 不能为空
selectionDirection 控制选中方向: forward, backward, none

document.execCommand

拷贝当前选中内容到剪贴板
功能很多, “copy” 只是其中一个
允许用户对当前文档、当前选中区域或者给定范围执行一个浏览器内部命令
有弃用危险

HTMLInputElement.select()

目标文本框全选
只能全选, 不接受参数
HTMLInputElement 可以不是当前获焦元素

Window.getSelection()

方法表示用户选择的文本范围或光标的当前位置

Range.selectNodeContents()

设置 Range, 使其包含一个 Node 的内容(选中节点里的全部文本)

Demo1

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>js 原生js复制到粘贴板</title>
	</head>

	<body>
		<div id="swq1">copy1原理:
			<p>利用 createTextRange 或 createRange 选择目标节点的内容;</p>
			<p>调用 document.execCommand("copy") 复制已选内容;</p>
			<p>createTextRange 或 createRange 不支持 input, textarea 元素;</p>
		</div>
		<textarea cols="20" rows="10" id="swq2">
			copy2原理:
			对目标节点使用 element.select();
			document.execCommand("copy");
			element.select() 仅支持 input, textarea 元素;
		</textarea>
		<div id="swq3">copy3原理:
			<p>新建一个 textarea 或 input元素</p>
			<p>在节点中插入目标文本内容</p>
			<p>将节点插入body</p>
			<p>element.select() + document.execCommand("copy");(同copy2原理)</p>
			<p>删除节点</p>
		</div>
		<textarea cols="20" rows="10" id="swq4">
			copy4原理:
			对目标节点使用 element.setSelectionRange(start, end);
			document.execCommand("copy");
			start, end 不能为空;
			element 必须是当前获焦元素(.focus() 获焦)
		</textarea>

		<input type="button" onClick="copy1()" value="copy1" />
		<input type="button" onClick="copy2()" value="copy2" />
		<input type="button" onClick="copy3()" value="copy3" />
		<input type="button" onClick="copy4()" value="copy4" />

		<script type="text/javascript">
			function copy1() {
				/*
				 * 原理: 传入节点 element (非 input, 可以包含子节点) > 创建一个 Range 对象 > Range 设为 element > 重置 selection > document.execCommand("copy")
				 */
				var element = document.getElementById("swq1")
				if(document.body.createTextRange) {
					// ie

					// 创建Range对象
					let range = document.body.createTextRange();

					// range 移动到指定对象
					range.moveToElementText(element);

					// 选择对象的内容
					range.select();

					// 复制内容
					document.execCommand("copy");
				} else if(window.getSelection) {
					// 非ie

					// 返回一个 Selection 对象, 选择的文本范围或光标的当前位置
					let selection = window.getSelection();

					// 创建Range对象
					let range = document.createRange();

					// selectNodeContents 选择节点的子节点
					// selectNode 选择整个节点
					// 设置 Range, 使其包含一个 Node 的内容(选中节点里的全部文本)
					range.selectNodeContents(element);

					// 清空 range
					selection.removeAllRanges();

					// 加入目标 range
					selection.addRange(range);

					// 复制内容
					document.execCommand("copy");
				} else {
					alert("当前浏览器不支持复制功能");
				}
			}

			function copy2() {
				/*
				 * 原理: input 获焦 > 全选 > document.execCommand("copy")
				 */
				var ele = document.getElementById("swq2");
				ele.select();
				document.execCommand("copy");
			}

			function copy3() {
				/*
				 * 原理: 传入字符串 text > 创建 textarea 节点 > textarea 中插入text > body 中插入 textarea > 全选 > document.execCommand("copy") > 移除 textarea
				 */
				let textArea = document.createElement('textarea');
				textArea.value = document.getElementById("swq3").innerHTML; // text
				document.body.appendChild(textArea);
				textArea.select();

				try {
					document.execCommand('copy');
				} catch(err) {
					console.log('当前浏览器不支持复制功能');
				}

				document.body.removeChild(textArea);
			}

			function copy4() {
				/*
				 * 原理: input 获焦 > 全选 > document.execCommand("copy")
				 * 出自: JavaScript高级程序设计（第3版）14.5.2
				 * 跟 copy2 类似, 但 setSelectionRange 可以扩展成 只复制部分文本
				 */
				let inputText = document.getElementById("swq4");

				// document.activeElement 返回文档中当前获得焦点的元素
				// 保存当前获焦对象, 复制结束后还原获焦对象
				let currentFocus = document.activeElement;

				// 令目标文本框获焦
				inputText.focus();
				// 设置文本的选中范围
				inputText.setSelectionRange(0, inputText.value.length);
				document.execCommand("copy");

				// 还原获焦对象
				currentFocus.focus();
			}
		</script>
	</body>

</html>

参考资料:

end

352328759

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js 原生js复制到粘贴板

优点:代码少纯元素JavaScript无插件无须服务器知识点:createTextRange//ie 创建TextRange 对象createRange//非ie 创建Range 对象Range 对象execCommand//允许用户对当前文档、当前选中区域或者给定范围执行一个浏览器内部命令element.select()//Input Text select()方法;选取...
复制链接

扫一扫