JS原生方法document.execCommand()复制到粘贴板
技术学院󰃄 2020-03-14     󰃩 20 次查看

document.execCommand()语法

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

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

使用

从输入框复制

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

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



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>,这样就要动态添加可编辑区域再删除。不从输入框复制

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

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()没有选中全部内容。



转载出处:本文章(教程)为本站原创,未经许可、禁止转载!




首页
技术
资源
我的