实现原理
采用document.execCommand('copy')
来实现复制到粘贴板功能
复制必须是选中input框的文字内容,然后执行document.execCommand('copy')
命令实现复制功能。
初步实现方案
const input = document.querySelector('#copy-input');
if (input) {
input.value = text;
if (document.execCommand('copy')) {
input.select();
document.execCommand('copy');
input.blur();
alert('已复制到粘贴板');
}
}
兼容性问题
input 输入框不能hidden
或者display: none
;
如果需要隐藏输入框可以使用定位脱离文档流,然后移除屏幕
#copy-input{
position: absolute;
left: -1000px;
z-index: -1000;
}
2.ios下不能执行document.execCommand('copy')
在 ios 设备下alert(document.execCommand('copy'))
一直返回false
查阅相关资料发现ios下input不支持input.select();
<