js複製文字到貼上板（Clipboard.writeText()）

前言

js如何複製文字到貼上板呢，網上所說的各種複製。。在Chrome或者說在我這個專案都沒用。

• windows.copy
• document.execCommand(“copy”);
• clipboard.js
• Clipboard.writeText() ，可行！

網上的程式碼

通過 document.execCommand('copy') 來操作。

    //建立選中範圍
    var range = document.createRange();
    range.selectNode(copyDom);
    //移除剪下板中內容
    window.getSelection().removeAllRanges();
    //新增新的內容到剪下板
    window.getSelection().addRange(range);
    //複製
    var successful = document.execCommand('copy');

通過 window.clipboardData.setData('Text',textVal) 這個 物件來操作的。可是都不work。

/**
* 複製程式碼
 */
$('#btnCopy').bind('click', function (e) {
    if (!$.isEmptyObject(codeData)) {
        //support IE
        var clipboardData = window.clipboardData;
        //support Chrome/Firefox
        if (!clipboardData) {
            clipboardData = e.originalEvent.clipboardData;
        }
        if (!clipboardData) {
            console.log(clipboardData);
            console.log(clipboardData.getData('text'));
            clipboardData.setData('Text', codeData[id]);
        }
        if(window != undefined){
           window.copy($("#genCodeArea").val());
        }
    }
});

clipboard.js

拷貝文字不應當是一件困難的事. 不需要過多繁雜的配置或者下載很多指令碼檔案. 最重要的，它不應該依賴flash或者其他框架，應該保持簡潔，clipboard.js

1. 通過cdn引入

<script src="//cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>

2. 使用功能

<!-- Target -->
<input id="copyArea" value="https://zhengkai.blog.csdn.net">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#copyArea">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

3. 檢視效果
   
4. 這個功能正常是可以的，但是可能我用了CodeMirror或者其他js導致衝突。

Clipboard.writeText()

以下場景是來自CodeGenerator的複製功能：

$('#btnCopy').on('click', function(){
     if(!$.isEmptyObject(genCodeArea.getValue())&&!$.isEmptyObject(navigator)&&!$.isEmptyObject(navigator.clipboard)){
         navigator.clipboard.writeText(genCodeArea.getValue());
         layer.msg("複製成功");
     }
 });

來源：https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText

相容性：Chrome66以上/Firefox63以上

效果展示：