JavaScript 在文本框隐藏状态下复制文本

最新推荐文章于 2021-10-17 22:45:39 发布

谁点的猪脚饭

最新推荐文章于 2021-10-17 22:45:39 发布

阅读量779

点赞数 2

文章标签： JavaScript 隐藏复制

本文链接：https://blog.youkuaiyun.com/liuguowei14/article/details/85341334

版权

本文介绍了一种使用JavaScript的document.execCommand方法实现文本复制的技巧，特别适用于隐藏的input元素。通过确保input元素可见且具有最小宽度，可以实现无缝的复制体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript复制文本的方法：document.execCommand(‘Copy’)
document.execCommand方法可以运行很多跟操纵可编辑区域有关的命令，详情地址如下：
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

想复制隐藏的input框,必须保证input框不处于display:none或visibility: hidden状态，且宽度不小于4(高度任意,亲测高度到0也没事),至于JavaScript为什么这样规定，我也不清楚，可能是为了安全吧

隐藏复制代码示例

		<html>
		<head>
		<title>复制</title>
		</head>
		<body>
		<button onclick="copyText()">点击此处复制</button>
		<input id="copyInput" value='复制的文本' style="opacity: 0;" readonly /><!-- 注意这样虽然看不见input,但是其仍然站着位置 -->
		<!-- 不占位置的隐藏方式  
		      <input id="copyInput" value='复制的文本2' style=" position: fixed;  width: 5px;    top: -6px;   height: 6px;"readonly />
		-->
		
		</body>
   
		<script>
		var copyInput=document.getElementById('copyInput')
		function copyText() {
			copyInput.select(); // 选择对象
			document.execCommand("Copy"); // 执行浏览器复制命令
			alert('已复制文本');
		}
		</script>
		</html>