原生JS实现复制功能

本文最后更新于:2 个月前

使用document.execCommand("Copy");但是它只能是操作可编辑区域的内容,也就是意味着除了 <input><textarea> 这样的输入域以外,是无法使用这个方法的。但是我们可以这个样子实现其他元素的复制:

1
2
3
4
5
6
7
8
var text=document.getElementById("id").innerText;
var t = document.createElement('input');
t.style.display='none';//隐藏这个输入框
t.value = text;
document.body.appendChild(t);
t.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
alert('复制成功');

遇到的坑

在Chrome下调试的时候,这个方法时完美运行的。然后到了移动端调试的时候,坑就出来了。

对,没错,就是你,ios…

1、点击复制时屏幕下方会出现白屏抖动,仔细看是拉起键盘又瞬间收起

知道了抖动是由于什么产生的就比较好解决了。既然是拉起键盘,那就是聚焦到了输入域,那只要让输入域不可输入就好了,在代码中添加input.setAttribute('readonly', 'readonly');使这个<input>是只读的,就不会拉起键盘了。

2、无法复制

这个问题是由于input.select()在ios下并没有选中全部内容,我们需要使用另一个方法来选中内容,这个方法就是 input.setSelectionRange(0, input.value.length);

完整代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
const btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
const input = document.createElement('input');
input.setAttribute('readonly', 'readonly');
input.setAttribute('value', 'hello world');
document.body.appendChild(input);
input.setSelectionRange(0, 9999);
if (document.execCommand('copy')) {
document.execCommand('copy');
console.log('复制成功');
}
document.body.removeChild(input);
})

::: tip

部分内容来自axuebin

:::


原生JS实现复制功能
https://www.chanx.tech/2020/680010f95661/
作者
ischanx
发布于
2020年8月6日
更新于
2022年5月4日
许可协议