zoukankan      html  css  js  c++  java
  • 一分钟学会自定义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 ]

  • 相关阅读:
    PHP项目学习1
    常见的几种单例模式
    CGlib和JDK动态代理
    jar打包方法使用整理
    JVM内存分配原理
    JDK环境变量配置目录jre,jvm
    android学习笔记13——ExpandableListView
    android学习笔记12——ListView、ListActivity
    android学习笔记11——ScrollView
    android学习笔记十——TabHost
  • 原文地址:https://www.cnblogs.com/juneling/p/14066844.html
Copyright © 2011-2022 走看看