使用原生 JS 複製文本兼容移動端 iOS & android

注意事項

使用 JS 實現複製功能並非很難，可是有幾個須要注意的地方。

首先文本只有選中才能夠複製，因此簡單的作法就是建立一個隱藏的 input，而後綁定須要複製的文本。

另外若是將 input 設置爲 ``type="hidden"或者display:none則沒法選中文本，也就沒法複製，能夠設置position:absolute;left:-999px;` 來隱藏文本域。

const copyInput = document.querySelector('#copyInput');
copyInput.value = '須要複製的文本'；
copyInput.select();
document.execCommand('Copy');

或者動態建立 input

function copy(str) {
    const input = document.createElement("input");
    input.readOnly = 'readonly';
    input.value = str;
    document.body.appendChild(input);
    input.select();
    input.setSelectionRange(0, input.value.length);
    document.execCommand('Copy');
    document.body.removeChild(input);
}

##移動端禁止鍵盤彈出

在 iOS 中 input 聚焦的時候會彈起鍵盤，對於複製操做交互體驗不好，能夠用如下方式禁止鍵盤的彈起。

<input type="text" readonly="readonly" />

<input type="text" onfocus="this.blur()" />

$("#box").focus(function(){
    document.activeElement.blur();
});

關於粘貼：除了 IE，現代化的瀏覽器暫時沒法讀取剪貼板裏的內容。