zoukankan      html  css  js  c++  java
  • js复制兼容:ZeroClipboard复制到剪切板(支持IE、FF、Chrome)

    注意:ZeroClipboard在本地测试无法直接使用,必须在服务器上测试,如http://localhost... 

    准备:ZeroClipboard.swf 和 ZeroClipboard.js

    小示例:单用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>复制</title>
    </head>
    <script type="text/javascript" src="ZeroClipboard.js"></script>
    <body>
    <input type="submit" name="btn_copy" value="复制" id="btn_submit" />
    <script type="text/javascript">
    var clip = new ZeroClipboard.Client();
    clip.setHandCursor(true);
    clip.setText("要复制的文本");
    clip.glue("btn_submit");
    </script>
    </body>
    </html>

    下载Demo>>>>>>>>>

     通用版:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>通用..</title>
    </head>
    <body>
    text: <input type="text" name="text" value="copy ok!" id="text"/>
    <input type="submit" name="btn_copy" value="复制" id="btn_submit"/>
    <script type="text/javascript" src="ZeroClipboard.js"></script>
     
    <script type="text/javascript">
    copyToClipboard('text','btn_submit');
    function copyToClipboard(txt,id){
    var clip = new ZeroClipboard.Client();
    clip.setHandCursor(true);
    var text= document.getElementById(txt).value;
    clip.setText(text);                    
    clip.glue(id);
    clip.addEventListener( "complete", function(){
        alert("复制成功!");
    });
    }
    </script> 
    </body>
    </html>

    jq:zclip复制

    ZeroClipboard官网

    更多功能>>>

  • 相关阅读:
    最近总结
    公开MQTT服务器列表
    MQTT资料收集
    开源游戏
    B站学习资料
    MQTT资料
    都2020年了,还再问GET和POST的区别?【深度好文】
    以“用户登录”测试谈用例编写
    接口自动化测试框架9项必备功能
    一篇文章了解软件测试基础知识
  • 原文地址:https://www.cnblogs.com/tinyphp/p/3307522.html
Copyright © 2011-2022 走看看