大专栏

前端 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.