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 ]

  • 相关阅读:
    东芝线阵CCD芯片TCD1305DG驱动时序设计
    数字电路中应避免产生不必要的锁存器 Latch
    准双向口、开漏输出、推挽输出结构介绍
    边沿检测电路小结
    数字系统中的亚稳态及其解决办法
    launch edge 和 latch edge 延迟
    基于Verilog的偶数、奇数、半整数分频以及任意分频器设计
    找到了救命的东西 NVIDIA MPS (multi-process service)
    关于多个程序同时launch kernels on the same GPU
    java的System.currentTimeMillis()和System.nanoTime()
  • 原文地址:https://www.cnblogs.com/juneling/p/14066844.html
Copyright © 2011-2022 走看看