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，实际上还是只能复制可编辑区域的内容