h 5貼り付け板互換iosへのワンタッチコピーを実現

実装の原理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();をサポートしていないことが分かった.
したがって、コピーされた文字は存在する必要があります.空の文字列ではありません.そうしないと、空の文字列をコピーする機能も実行されません.
このブログを参考に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/
*/
        
 .