JavaScript 實現復制到剪貼板的總結

在官網看到以下代碼，原生JS把input輸入的內容復制到剪貼板

<p>點擊復制后在右邊textarea CTRL+V看一下</p>
<input type="text" id="inputText" value="測試文本"/>
<input type="button" id="btn" value="復制"/>
<textarea rows="4"></textarea>
<script type="text/javascript">
    var btn = document.getElementById('btn');
    btn.addEventListener('click', function(){
        var inputText = document.getElementById('inputText');
        var currentFocus = document.activeElement;
        inputText.focus();
        inputText.setSelectionRange(0, inputText.value.length);
        document.execCommand('copy', true);
        currentFocus.focus();
    });
</script>

 總結一下

1. createTextRange() 方法

很遺憾，只有IE支持這個方法。

2.  createRange()  似乎都不支持，是XML DOM的Range對象的方法

3. setSelectionRange() 方法 

• 只受用於一些含有value屬性的HTML控件，例如單行文本框、多行文本域；
• 后面兩個參數表示起始字符位置與結束的字符位置，如果位置值為空，或是非數值，則會（從頭或至尾或全部）選擇字符；
• 支持負值，負值表意與js中的slice屬性一致，負值表示的含義就是負值與字符總長度的和，也可以理解為從末尾開始選擇；
• 如果數值范圍超過字符總長，則無內容選擇；
• 支持單參數，省略第三個參數表示一致到字符結束都要選中。

4. select()  同樣只適用於 input 或者 textarea 文本框

5. textContent 屬性 

屬性設置或返回指定節點的文本內容，以及它的所有后代。

如果您設置了 textContent 屬性，會刪除所有子節點，並被替換為包含指定字符串的一個單獨的文本節點。

提示：有時，此屬性可用於取代 nodeValue 屬性，但是請記住此屬性同時會返回所有子節點的文本。

6. text()方法。設置或返回被選元素的文本內容。可選參數可以是文本，也可以是函數，使用函數設置所有被選元素的文本內容。

7. document.execCommand() 方法允許運行命令來操縱可編輯區域的內容。又是可編輯區域...

8. document.activeElement 屬性返回文檔中當前獲得焦點的元素。這個屬性是只讀的。document.activeElement.tagName 獲得焦點的元素的標簽名。官網的這行代碼，阻止了焦點元素被選中的默認行為？

9. window.clipboardData: 只有IE支持這個屬性。

10. Node.innerText/ innerHtml/ textContent

innerHtml 獲取節點下包含的內容，包括節點下的子節點html標簽。

innerText 則不包含節點下html標簽。

textContent 屬性表示一個節點及其后代的文本內容。

• textContent 會獲取所有元素的內容，包括 <script> 和 <style> 元素，然而 innerText 不會。
• innerText意識到樣式，並且不會返回隱藏元素的文本，而textContent會。
• 由於 innerText 受 CSS 樣式的影響，它會觸發重排（reflow），但textContent 不會。
• 與 textContent 不同的是, 在 Internet Explorer (對於小於等於 IE11 的版本) 中對 innerText 進行修改， 不僅會移除當前元素的子節點，而且還會永久性地破壞所有后代文本節點（所以不可能再次將節點再次插入到任何其他元素或同一元素中）。
• textContent通常具有更好的性能，因為文本不會被解析為HTML。此外，使用textContent可以防止  XSS 攻擊。

 jQuery ZeroClipboard實現復制到剪貼板功能。

需引用兩個文件：

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.zclip.js"></script>

需要搭建服務器環境，並且這個要求支持Flash. 出於安全方面的考慮，Flash即將在2020年停止開發和運行。

另外一個插件：clipboard.js

提供selection和execCommand這兩個接口。

Github：
https://github.com/zenorocha/clipboard.js

感興趣可以搜一下，這個插件用法很簡單，但是execCommand這個API，實際上還是只能復制可編輯區域的內容