实现原理

采用 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('已复制到粘贴板');
      }
    }

兼容性问题

1. 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();

因此拷贝的文字必须存在，不能为空字符串，不然也不会执行复制空字符串的功能

参考这篇博客实现了 ios 下复制的功能 https://blog.csdn.net/VLilyV/…

主要是使用 textbox.createTextRange 方法选中输入框的文字

// input 自带的 select()方法在苹果端无法进行选择，所以需要自己去写一个类似的方法
// 选择文本。createTextRange(setSelectionRange)是 input 方法
function selectText(textbox, startIndex, stopIndex) {if (textbox.createTextRange) {//ie
    const range = textbox.createTextRange();
    range.collapse(true);
    range.moveStart('character', startIndex);// 起始光标
    range.moveEnd('character', stopIndex - startIndex);// 结束光标
    range.select();// 不兼容苹果} else {//firefox/chrome
    textbox.setSelectionRange(startIndex, stopIndex);
    textbox.focus();}
}

3.ios 设备上复制会触发键盘弹出事件

给 input 加上 readOnly 只读属性

代码

踩完以上的坑，总结的代码如下
git 地址 https://github.com/zhaosheng8…

  copyText = (text) => {
    // 数字没有 .length 不能执行 selectText 需要转化成字符串
    const textString = text.toString();
    let input = document.querySelector('#copy-input');
    if (!input) {input = document.createElement('input');
      input.id = "copy-input";
      input.readOnly = "readOnly";        // 防止 ios 聚焦触发键盘事件
      input.style.position = "absolute";
      input.style.left = "-1000px";
      input.style.zIndex = "-1000";
      document.body.appendChild(input)
    }

    input.value = textString;
    // ios 必须先选中文字且不支持 input.select();
    selectText(input, 0, textString.length);
    console.log(document.execCommand('copy'), 'execCommand');
    if (document.execCommand('copy')) {document.execCommand('copy');
      alert('已复制到粘贴板');
    }
    input.blur();

    // input 自带的 select()方法在苹果端无法进行选择，所以需要自己去写一个类似的方法
    // 选择文本。createTextRange(setSelectionRange)是 input 方法
    function selectText(textbox, startIndex, stopIndex) {if (textbox.createTextRange) {//ie
        const range = textbox.createTextRange();
        range.collapse(true);
        range.moveStart('character', startIndex);// 起始光标
        range.moveEnd('character', stopIndex - startIndex);// 结束光标
        range.select();// 不兼容苹果} else {//firefox/chrome
        textbox.setSelectionRange(startIndex, stopIndex);
        textbox.focus();}
    }
  };


// 复制文字

// 必须手动触发 点击事件或者其他事件，不能直接使用 js 调用！！！copyText('h5 实现一键复制到粘贴板 兼容 ios')


/* 兼容性补充：移动端：安卓手机：微信（chrome）和几个手机浏览器都可以用。苹果手机：微信里面和 sarafi 浏览器里也都可以，PC:sarafi 版本必须在 10.2 以上，其他浏览器可以.
 兼容性测试网站：https://www.caniuse.com/
*/
        
 .