h5 实现一键复制到粘贴板 兼容iOS

效果展示

先贴上测试连接 http://cdn.foundao.com/zhaosheng/copytext

实现原理

采用 document.execCommand(‘copy’) 来实现复制到粘贴板功能

复制必须是选中input框的文字内容，然后执行document.execCommand(‘copy’)命令实现复制功能。

初步实现方案（非完整代码）：

// 此代码 在iOS下有bug,完整代码在最后贴出
const input = document.querySelector('#copy-input');
    if (input) {
   
   
      input.value = text;
      if (document.execCommand('copy')) {
   
   
        input.select();
        document.execCommand('copy');
        input.blur();
        alert('已复制到粘贴板');
      }
}

兼容性问题

1、input 输入框不能 hidden 或者 display: none;

如果需要隐藏输入框可以使用定位脱离文档流，然后移除屏幕

#copy-input{
   
   
  position: absolute;
  left: -1000px;
  z-index: -1000;