js实现复制到剪贴板的方法
我们web上的复制，有时候尽管可以用鼠标选中，然后复制，但是某些时候，文字不方便选中。因此，我们自定义一个复制按钮，然后通过点击它，把想要的内容复制到剪贴板上。我归纳总结了几种方法：
首先上例子，然后详解说明：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>点击“复制”按钮，然后CTRL+V看一下复制成功的内容</p> <input type="text" id="inputText" value="测试内容01"/> <input type="button" id="btn" value="复制"/> <textarea rows="4"></textarea> </body> <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> </html> 效果图：
详解分析：
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 攻击。
本文最后编辑 2019-07-21 09:41:53
原文链接：https://www.qiquanji.com/post/8298.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知