一分钟学会自定义js复制粘贴内容

 

一篇简易明了，一看就懂得知识博客，话不多说 开撸。。。

 

 

 

需求如下：

 

复制：   

我是一段话。

粘贴后：

我是一段话。
作者：xxx
链接：xxx
来源：博客园

四个知识点实现：

1.element.oncopy,用来捕获复制事件；

 

2.window.getSelection()获取用户复制的内容

  1）它返回一个**Selection对象**；

  2）在IE8及以下的浏览器上不支持;

  3）我们最终要获取的是选中区域的纯文本，而不是一个Seletion对象。因此需要将Selection对象转换成字符串，可以通过拼接一个空字符串或使用String.toString()方法。

 

3.clipboardData 的 setData()方法将信息写入剪贴板；

该对象有三个方法：

getData()方法接受一个format参数，即要取得的数据的格式。数据类型有：text/plain、text/uri-list。

setData()方法授受两个参数，一个是format参数，代表数据类型。第二个参数代表要放入剪贴板中的文本内容。这里我们可以指定format参数为text/plain，代表纯文本。

clearData()方法接受一个可选参数format，代表要删除的数据类型。如果此参数为空字符串或未提供，则删除所有类型的数据。

 

4.阻止掉默认复制事件；

 

整体代码如下：

<script>
        document.oncopy = function (e) {
            // 获取选区对象
            let selObj = window.getSelection();// IE8及更早不支持window.getSelection
            if (typeof selObj == 'undefined') return false;

            // 获取clipboardData对象
            // ChromeSafariFirefox浏览器中,这个对象是event对象的属性
            // IE浏览器中,它是window对象的属性
            let clipboardData = e.clipboardData || window.clipboardData;

            // 获取选区文本内容
            let selectedText = selObj + '';
            let copytext = selectedText +
                    '


' +
                    '作者：XXX
' +
                    '链接：' + location.href + '
' +
                    '来源：博客园
' +
                    '著作权归作者所有。商业转载请联系作者获取授权，非商业转载请注明出处。';

            clipboardData.setData('text/plain', copytext);
            
            // 取消默认的复制事件
            return false;
            // e.preventDefault()亦可
            
        }
    </script>

-------------------------------------------------------------------------------

如有错误，欢迎评论指正、共同提高。[握手]    

欢迎转载，转载请注明：转载自[ http://www.cnblogs.com/juneling ]