【JavaScript】实现单击复制一段文字【适用Vue】

最新推荐文章于 2022-07-29 15:39:36 发布

波吉

最新推荐文章于 2022-07-29 15:39:36 发布

阅读量238

点赞数

分类专栏：前端 Vue 文章标签： css html vue js javascript

本文链接：https://blog.csdn.net/weixin_42678675/article/details/117947511

版权

前端同时被 2 个专栏收录

71 篇文章 4 订阅

订阅专栏

Vue

22 篇文章 3 订阅

订阅专栏

概述

有客户提出，需要在页面表格中，鼠标单击就能把该单元格的内容复制到剪贴板中的需求，因此抽象出如下代码实现思路：

增加一个隐藏的input框
点击单元格内容时，把内容赋值到input框上
选中input框上的文本
执行浏览器复制命令

完整代码

HTML

<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#input{
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				z-index: -10;
			}
		</style>
</head>
<body>
		<p id="text" onclick="copy()">复制我吧</p>
		<textarea id="input"></textarea>
</body>

JavaScript

function copy() {
				let text = document.getElementById('text').innerText
				let input = document.getElementById('input')
				input.value = text
				input.select()
				document.execCommand("copy")
			}

注意

提到让 input 框隐藏，可能有的小伙伴想到了 hidden 属性，但是这里 不推荐 在 textarea 或任何 input 中加 hidden 属性，在 Vue 中很大几率会复制失败，原生中也有复制失败的情况
要解决第一点，我们可以通过 opacity:0 让 input 框变得透明，但此时 input 框仍然会 占用 HTML 布局，会影响到页面内其他正常的布局
要解决第二点，我们可以通过 position: absolute 让 input 框为 绝对定位，以此不影响到页面其他元素的布局
上面的代码，在 Vue 中同样适用

波吉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】实现单击复制一段文字【适用Vue】

概述有客户提出，需要在页面表格中，鼠标单击就能把该单元格的内容复制到剪贴板中的需求，因此抽象出如下代码实现思路：增加一个隐藏的input框点击单元格内容时，把内容赋值到input框上选中input框上的文本执行浏览器复制命令完整代码HTML<head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #input{ p
复制链接

扫一扫