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 攻擊。
需引用兩個檔案：
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.zclip.js"></script>
需要搭建伺服器環境，並且這個要求支援Flash. 出於安全方面的考慮，Flash即將在2020年停止開發和執行。
提供selection和execCommand這兩個介面。
感興趣可以搜一下，這個外掛用法很簡單，但是execCommand這個API，實際上還是隻能複製可編輯區域的內容