h5複制粘貼文字到剪切闆

需求：點選按鈕時複制某段文字，轉發時可以直接粘貼

<div id="copy-txt">
    前方高能預警，朋友圈文案在這裡哦：**放大招，一分坐公交，還能領紅包！
</div>
<button onclick="copyTXT()">複制</button>
           

HTML5 提供了複制功能的如下API：

• document.createRange()

  : 建立選中容器，傳回一個 range Object，支援移動端和 PC 端。

• selectNode(DOM)

  : 傳回 range Object 上挂載的方法，用來添加選中元素，隻能添加一個。

• window.getSelection()

  ：用來獲得目前選中的元素的内容。一般而言就是用滑鼠選中頁面上的内容。

• addRange(range)

  : 這個方法是挂載到

  getSelection()

  方法下的，用來執行元素的選中。

function copyTXT(){
    var copyDOM = document.querySelector('#copy-txt'); //指定的DOM元素
    var range = document.createRange(); // 建立容器
    range.selectNode(copyDOM); // 選中需要複制的節點
    window.getSelection().addRange(range); // 執行選中元素
    var successful = document.execCommand('copy');// 執行 copy 操作
    try {
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Copy was ' + msg);
    } catch(err) {
        console.log('unable to copy');
    }
    window.getSelection().removeAllRanges(); // 移除選中的元素
}
           

值得注意的是：以上複制的方法是不能自主執行的，也就是說需要某個事件去觸發，比如點選，長按等。