关于兼容ios等多端浏览器的复制文字到剪贴板的方法

基础逻辑还是比较常见的，主要是先判断是否能用标准的浏览器复制api，不能，则使用 兼容性写法。 重点在于兼容性写法，其主要的逻辑是创建一个dom填入值然后复制到剪贴板，然后删除dom。仅仅是这样的话，在ios端会有比较大的问题，在选中dom进行复制的过程中ios会自动唤起输入键盘，在删除dom的过程中输入键盘又会自动关闭，导致在使用时会造成页面闪烁的结果，以下代码是从 clipboard.js 库中翻出来的带ios兼容的代码，主要就是避免输入键盘弹出消失所造成的影响，因为之前在网络上百般寻找并未找到相关处理方式，于是在此贴出代码，希望对后来者有所帮助

export function copyFu(text) {//复制内容到剪贴板 通用函数
  return new Promise((resolve, reject) => {
    // 创建一个临时文本输入框
    if (navigator.clipboard) {
      console.log('满足条件', 'navigator.clipboard')
      navigator.clipboard.writeText(text).then(() => {
        resolve(true)
      }).catch(err => {
        reject(false)
      });
    } else {
      try {
        const isRTL = document.documentElement.getAttribute('dir') === 'rtl';
        const fakeElement = document.createElement('textarea');
        // Prevent zooming on iOS
        fakeElement.style.fontSize = '12pt';
        // Reset box model
        fakeElement.style.border = '0';
        fakeElement.style.padding = '0';
        fakeElement.style.margin = '0';
        // Move element out of screen horizontally
        fakeElement.style.position = 'absolute';
        fakeElement.style[isRTL ? 'right' : 'left'] = '-9999px';
        // Move element to the same position vertically
        let yPosition = window.pageYOffset || document.documentElement.scrollTop;
        fakeElement.style.top = `${yPosition}px`;

        fakeElement.setAttribute('readonly', '');
        fakeElement.value = text;
        document.body.appendChild(fakeElement);

        var isReadOnly = fakeElement.hasAttribute('readonly');
        if (!isReadOnly) {
            fakeElement.setAttribute('readonly', '');
        }
        fakeElement.select();
        fakeElement.setSelectionRange(0, fakeElement.value.length);

        if (!isReadOnly) {
            fakeElement.removeAttribute('readonly');
        }


        document.execCommand('copy');
        fakeElement.remove();

        resolve(true)
      } catch {
        reject(false)
      }
    }

  })

}