JavaScript - 复制文本方法实现

Posted 2021-06-17 WHOVENLY

目录

• 一、实现原理
• 二、实现步骤
• 三、遇到的问题

一、实现原理

采用input或者textarea元素特有的select()方法，用于选中输入框的文本，再调用copy命令，将文本复制到剪切板，以实现复制文本的功能。

二、实现步骤

1.首先为展示文本的input元素，添加ref属性。

<input type="text" :value="code" ref="demoInput" readonly>

2.为【复制兑换码】按钮添加一个点击事件copy()。

<div class="btn" @click="copy()">复制兑换码</div>

3.书写copy()方法。

copy() {
let input = this.$refs["demoInput"];//获取元素
input.select();//通过 select() 方法，选中输入框的文本
//调用copy命令，将文本复制到剪切板
if (document.execCommand("copy")) {
    document.execCommand("copy");
    this.$toast("已复制");
    }
}

如果是使用input或者是textarea元素展示文本，则以上方法即可实现。

三、遇到的问题

问题：select() 方法只对和元素有效！！！如果页面不需要展示文本或者是不使用input或者textarea元素展示文本，则获取不到文本内容

解决办法：在页面中添加一个或者元素，并将该元素隐藏，这样就可以通过调用这个隐藏元素的select()去进行文本的获取了。

以下是我尝试的各种隐藏元素方法：
隐藏元素方式1：
diaplay:none
虽然元素确实不见了，但是它是真的不见了，完全消失了，所以此时你去获取元素是获得不到的，所以该方案pass。
隐藏元素方式2.0：
width：0； height：0；
使用该方式后，你以为元素不存在页面中了？不存在的，页面中依然有它的痕迹，所以该方案也pass。
隐藏元素方式2.1：
width：0； height：0 border: none;
使用该方式后，元素在页面中不显示了，但是依旧会占据一小块的地方，所以该方案虽然可行，但不完美。

隐藏元素方式3：使用定位，完美解决。
position: fixed; width: 5px; top: -6px; height: 0;

欢迎反馈文中表述不准确的地方或是不足之处~