前端 js原生方法document.execCommand()复制到粘贴板

buglee · October 26, 2019 · 360 hits

document.execCommand()语法

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument) 返回值是布尔值,表示是否支持。

aCommandName: 命令名字,copy,cut
aShowDefaultUI:一个 Boolean, 是否展示用户界面,一般为 false。
aValueArgument:一些命令(例如 insertImage)需要额外的参数(insertImage 需要提供插入 image 的 url),默认为 null,一般不用。

使用

从输入框复制

页面需要一个input标签,demo 如下:

1
2
<input id="demoInput" value="hello world">
<button id="btn">点我复制</button>

1
2
3
4
5
6
7
8
9
let btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
let input = document.querySelector('#demoInput');
input.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
console.log('复制成功');
}
})

不从输入框复制

由于document.execCommand()只能操作可编辑区域,即<input>,<textarea>,这样就要动态添加可编辑区域再删除。

1
2
<div id="val">复制内容</div>
<button id="btn">点我复制</button>

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

input.setAttribute('readonly', 'readonly'),兼容在 iOS 环境下瞬间拉起键盘又缩回的闪烁;
input.setSelectionRange(0, val.length);,还是因为在 iOS 环境下,input.select()没有选中全部内容。

No Reply at the moment.
You need to Sign in before reply, if you don't have an account, please Sign up first.