zoukankan      html  css  js  c++  java
  • 【javascript】复制到剪贴板功能(支持目前各种浏览器)

    本demo支持各种浏览器复制,亲测可用(IE8,IE9,IE10,火狐,谷歌)。

    本demo中使用了ZeroClipboard(下载地址:https://github.com/zeroclipboard/zeroclipboard)。

    本demo 必须在服务器环境下,浏览器直接打开无效。

    本demo 需要引入3个文件:jquery.min.js、ZeroClipboard.min.js和ZeroClipboard.swf。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>复制到剪切板demo</title>
    <script type="text/javascript" src="/webtest/js/jquery.min.js"></script>
    <script type="text/javascript" src="/webtest/js/ZeroClipboard.min.js"></script>
    </head>
    <body>
        <input type="button" value="复制当前页面url" class="my_copy" >
    </body>
    <script type="text/javascript">
    
    $(function() {
        var url = window.location.href;
        
        try{//支持ZeroClipboard
            ZeroClipboard.config( { swfPath:  "/webtest/js/ZeroClipboard.swf" } );
            $(".my_copy").each(function(i) {
                var client = new ZeroClipboard($(this));
                client.on("copy", function (event) {
                      var clipboard = event.clipboardData;
                      clipboard.setData( "text/plain", url);
                      alert('当前页面链接已复制到剪贴板!');
                      // clipboard.setData( "text/html", "<b>Copy me!</b>" );
                      // clipboard.setData( "application/rtf", "{\rtf1\ansi
    {\b Copy me!}}" );
                    });
            });
        }catch(e){
            //不支持ZeroClipboard
            $(".my_copy").each(function(i) {
                $(this).on("click", function(){
                    var res = window.clipboardData.setData("Text", encodeURI(url));
                    if(res){
                        alert('收集链接已复制到剪贴板!');
                    }
                    
                });
                
            });
        }
        
    
    })
    </script>
    </html>
  • 相关阅读:
    LINUX安装NGINX
    CentOS 设置mysql的远程访问
    centos6 mysql 安装与配置
    php读取用友u8采购入库单列表及详细
    php读取用友u8客户档案
    深度linux没有ll等命令的解决办法
    CentOS7下FTP的安装与配置
    虚拟机CentOS6.5搭建samba服务器实现文件共享
    linux 查找php.ini在那个文件夹
    CBE引擎概览
  • 原文地址:https://www.cnblogs.com/haha12/p/5395796.html
Copyright © 2011-2022 走看看