js实现复制到剪贴板的方法

时间：5年前阅读：5943

我们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,我们将及时处理。

微信扫码关注

更新实时通知

js实现复制到剪贴板的方法

网友评论