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

野性酷女 2022-10-07 04:55 129阅读 0赞

# 概述 #

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

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

# 完整代码 #

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")
    			}

# 注意 #

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

发表评论取消回复

表情：

评论列表（有 0 条评论，129人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript实现一段时间之后关闭广告

JavaScript实现一段时间之后关闭广告案例池子： [JS实现鼠标悬停变色 ][JS_] [JavaScript中的排他算法实现按钮单选][JavaSc

傷城~/ 2024年03月31日 16:11/ 0 赞/ 50 阅读

相关 012：手写函数，vue实现文字复制功能

![在这里插入图片描述][32d2a1d099334cfba6adc4f84dd79e22.png_pic_center] 第012个查看专栏目录: [VUE][] —

今天药忘吃喽~/ 2024年03月16日 18:02/ 0 赞/ 36 阅读

相关 vue&uni-app项目实现一段文字逐个显示

实现思路是将要显示的字符串用substr() 方法进行分割，使用计时器逐个增加要分割的长度主要代码： onLoad(options) { this

朱雀/ 2023年01月17日 11:54/ 0 赞/ 336 阅读

相关 vue：复制文字到剪切板

一、安装 npm install --save vue-clipboard2 二、在main.js文件中引入和使用复制包（全局使用） import Vue

拼搏现实的明天。/ 2023年01月10日 01:26/ 0 赞/ 220 阅读

相关 Javascript 实现一段字符串反转

Hi Baby 变成 Baby Hi const str = 'Hi Baby' function reverse(str) {

柔情只为你懂/ 2022年12月08日 04:59/ 0 赞/ 161 阅读

相关【JavaScript】------ 实现js点击复制按钮复制文字实例

> ![gif.latex][]1.需要注意的是： > > 1.input必须不能是隐藏的 > > 2.input框不能有disabled属性 > >

约定不等于承诺〃/ 2022年11月27日 07:14/ 0 赞/ 192 阅读

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

概述有客户提出，需要在页面表格中，鼠标单击就能把该单元格的内容复制到剪贴板中的需求，因此抽象出如下代码实现思路： 1. 增加一个隐藏的input框 2. 点击单元

野性酷女/ 2022年10月07日 04:55/ 0 赞/ 130 阅读

相关 HTML中点击文字后变色,再点击下一段文字时,下一段文字变色，之前的一段文字颜色恢复原来颜色

index.js function HideOrShowFont(obj) \{ if (obj == "a1") \{

你的名字/ 2022年05月24日 02:50/ 0 赞/ 257 阅读

相关 echo屏幕显示一段文字

3.10 echo屏幕显示一段文字 3.10.1语法 > echo \[-neE\] \[arg …\] 可以使用echo查看某个系统变量的值：例如：

小鱼儿/ 2022年02月28日 04:22/ 0 赞/ 246 阅读

相关 WPF 语音读取某一段文字

///<summary> /// 调用系统语音朗读备注该方法只支持.net 4.0 版本以上 /// </summ

绝地灬酷狼/ 2021年11月23日 15:16/ 0 赞/ 247 阅读