摘要：是方法起始光標(biāo)結(jié)束光標(biāo)不兼容蘋果復(fù)制文字必須手動(dòng)觸發(fā)點(diǎn)擊事件或者其他事件，不能直接使用調(diào)用實(shí)現(xiàn)一鍵復(fù)制到粘貼板兼容兼容性補(bǔ)充移動(dòng)端安卓手機(jī)微信和幾個(gè)手機(jī)瀏覽器都可以用。

采用document.execCommand("copy")來實(shí)現(xiàn)復(fù)制到粘貼板功能

復(fù)制必須是選中input框的文字內(nèi)容，然后執(zhí)行document.execCommand("copy")命令實(shí)現(xiàn)復(fù)制功能。
初步實(shí)現(xiàn)方案

const input = document.querySelector("#copy-input");
    if (input) {
      input.value = text;
      if (document.execCommand("copy")) {
        input.select();
        document.execCommand("copy");
        input.blur();
        alert("已復(fù)制到粘貼板");
      }
    }

input 輸入框不能hidden或者display: none;
如果需要隱藏輸入框可以使用定位脫離文檔流，然后移除屏幕

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

2.ios下不能執(zhí)行document.execCommand("copy")

在ios設(shè)備下alert(document.execCommand("copy"))一直返回false
查閱相關(guān)資料發(fā)現(xiàn)ios下input不支持input.select();

因此拷貝的文字必須存在，不能為空字符串，不然也不會(huì)執(zhí)行復(fù)制空字符串的功能

參考這篇博客實(shí)現(xiàn)了ios下復(fù)制的功能 https://blog.csdn.net/VLilyV/...

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

// input自帶的select()方法在蘋果端無法進(jìn)行選擇，所以需要自己去寫一個(gè)類似的方法
// 選擇文本。createTextRange(setSelectionRange)是input方法
function selectText(textbox, startIndex, stopIndex) {
  if (textbox.createTextRange) {//ie
    const range = textbox.createTextRange();
    range.collapse(true);
    range.moveStart("character", startIndex);//起始光標(biāo)
    range.moveEnd("character", stopIndex - startIndex);//結(jié)束光標(biāo)
    range.select();//不兼容蘋果
  } else {//firefox/chrome
    textbox.setSelectionRange(startIndex, stopIndex);
    textbox.focus();
  }
}

3.ios設(shè)備上復(fù)制會(huì)觸發(fā)鍵盤彈出事件

給input加上readOnly只讀屬性

踩完以上的坑，總結(jié)的代碼如下
git地址 https://github.com/zhaosheng8...

  copyText = (text) => {
    // 數(shù)字沒有 .length 不能執(zhí)行selectText 需要轉(zhuǎn)化成字符串
    const textString = text.toString();
    let input = document.querySelector("#copy-input");
    if (!input) {
      input = document.createElement("input");
      input.id = "copy-input";
      input.readOnly = "readOnly";        // 防止ios聚焦觸發(fā)鍵盤事件
      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("已復(fù)制到粘貼板");
    }
    input.blur();

    // input自帶的select()方法在蘋果端無法進(jìn)行選擇，所以需要自己去寫一個(gè)類似的方法
    // 選擇文本。createTextRange(setSelectionRange)是input方法
    function selectText(textbox, startIndex, stopIndex) {
      if (textbox.createTextRange) {//ie
        const range = textbox.createTextRange();
        range.collapse(true);
        range.moveStart("character", startIndex);//起始光標(biāo)
        range.moveEnd("character", stopIndex - startIndex);//結(jié)束光標(biāo)
        range.select();//不兼容蘋果
      } else {//firefox/chrome
        textbox.setSelectionRange(startIndex, stopIndex);
        textbox.focus();
      }
    }
  };


// 復(fù)制文字

// 必須手動(dòng)觸發(fā) 點(diǎn)擊事件或者其他事件，不能直接使用js調(diào)用！??！
copyText("h5實(shí)現(xiàn)一鍵復(fù)制到粘貼板 兼容ios")


/*兼容性補(bǔ)充：
 移動(dòng)端：
 安卓手機(jī)：微信（chrome）和幾個(gè)手機(jī)瀏覽器都可以用。 
 蘋果手機(jī)：微信里面和sarafi瀏覽器里也都可以，  
 PC:sarafi版本必須在10.2以上，其他瀏覽器可以.
 兼容性測(cè)試網(wǎng)站：https://www.caniuse.com/
*/
        
 .