zoukankan      html  css  js  c++  java
  • zeroclipboard浏览器复制插件使用记录

    一个简单例子:

    <html>
      <body>
        <button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button>
        <script src="~/Scripts/jquery-1.7.1.js"></script>
        <script src="~/Scripts/ZeroClipboard.js"></script>
      </body>
      <script>
    
      var client = new ZeroClipboard( $("#copy-button") );
       client.on('ready', function (event) {
    
                client.on('copy', function (event) {
                    event.clipboardData.setData('text/plain', event.target.innerHTML);
                    alert("复制成功");
                });
    
                client.on('aftercopy', function (event) {
                    //复制之后的操作,如果不是自动在本页面粘贴,请把此事件备注掉
                    console.log('Copied text to clipboard: ' + event.data['text/plain']);
                });
            });
    
            client.on('error', function (event) {
                //出错的时候该干嘛
                // console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );
                ZeroClipboard.destroy();
            });
      </script>
    </html>
    

      

    2.2版本需要引用jquery,要习惯把js代码写到页面底部,经测试,发现此代码不支持IE10/11,以下提供兼容IE的function,替换js部分即可

    <script>
            $(function() {
                var text="取文本";
                var msg="复制成功";
                clipboard("btn_copy",text,msg);
            });
    
            //参数说明
            //button:按钮id
            //text:要复制的文本
            //msg:复制成功提示文本
            function clipboard(button,text,msg) {
    
                if (window.clipboardData) {        //for ie
                    var copyBtn = document.getElementById(button);
                    copyBtn.onclick = function () {
                        window.clipboardData.setData('text', text);
                        alert(msg);
                    }
                } else {
                    var client = new ZeroClipboard($("#" + button));
                    client.on('ready', function (event) {
    
                        client.on('copy', function (event) {
                            event.clipboardData.setData("text/plain", text);
                            alert(msg);
                        });
                    });
    
                    client.on('error', function (event) {
                        ZeroClipboard.destroy();
                    });
                }
                return false;
            }
        </script>
    

      

    最后,需要注意的是不要在本地调度,你会发现不会生效,因为Flash的安全限制
     
    zeroclipboard源码:https://github.com/zeroclipboard/zeroclipboard
    zeroclipboard官网:zeroclipboard.org
  • 相关阅读:
    POJ 3126 Prime Path
    POJ 2429 GCD & LCM Inverse
    POJ 2395 Out of Hay
    【Codeforces 105D】 Bag of mice
    【POJ 3071】 Football
    【POJ 2096】 Collecting Bugs
    【CQOI 2009】 余数之和
    【Codeforces 258E】 Devu and Flowers
    【SDOI 2010】 古代猪文
    【BZOJ 2982】 combination
  • 原文地址:https://www.cnblogs.com/shensigzs/p/5321479.html
Copyright © 2011-2022 走看看