9行代码实现复制内容至剪切板

Demo: ma125120.github.io/ma-dom/test…

本方法主要使用了 Range 对象和HTML5的Selection API，经过测试，本方法在主流浏览器如谷歌浏览器、火狐浏览器、360安全浏览器、搜狗高速浏览器中均运行良好。

先附上大家最想看的代码：

function copy(el) {
	var range = document.createRange();
	var end = el.childNodes.length;
	range.setStart(el,0);
	range.setEnd(el,end);

	var selection = window.getSelection();
	selection.removeAllRanges();
	selection.addRange(range);
	document.execCommand("copy",false,null);
	selection.removeRange(range);
}
复制代码

实现步骤

1. 首先是利用**document.createRange()**创建一个 Range 对象 ,然后获取所需复制元素的子元素的长度大小，然后调用Range对象的setStart和setEnd方法设置选择区域的大小。
2. 此时只是设置了选择区域的大小，实际上在window中并没有真正选中，所以还需要调用window.getSelection()生成一个 Selection 对象，在添加选区之前最好先调用selection.removeAllRanges()清除其他的选区，否则浏览器可能会发出下面的警告，然后再调用 Selection 对象的addRange方法，将上一步的 range 作为参数传入，即可将所需复制的元素真正设置为被选择区域。
3. 现在就可以像平时选中文字后调用document.execCommand来实现将被选择区域的文字复制到剪贴板。
4. 最后还需要调用 Selection 对象的removeRange方法将 Range 对象移除，保证被选择区域永远只有一个被选择的元素，否则某些浏览器在下次可能会因为有两个被选择元素而发出警告或者报错。

注意

--

调用该功能时，必须是在点击按钮后或者是点击 带有user-select: none属性的元素，否则浏览器可能会发出这样的警告：[Deprecation] The behavior that Selection.addRange() merges existing Range and the specified Range was removed. See https://www.chromestatus.com/features/6680566019653632 for more details.

不想复制代码的，我已经把该功能发布到npm,直接使用 npm i ma-dom --save-dev，然后引入 import { copy } from 'ma-dom' 即可直接调用该方法。

最后附上github地址：github.com/ma125120/ma…。

如有任何问题，欢迎在下方评论区提出意见。