ZeroClipboard.js - 兼容所有浏览器的文字复制功能

最新推荐文章于 2024-08-13 08:19:03 发布

vcxiaohan2

最新推荐文章于 2024-08-13 08:19:03 发布

阅读量1k

点赞数

分类专栏： jQuery插件

本文链接：https://blog.csdn.net/u011500781/article/details/50179317

版权

jQuery插件专栏收录该内容

29 篇文章 0 订阅

订阅专栏

请在这里查看示例 ☞ ZeroClipboard示例

我们有必要简化ctrl+c、ctrl+v的繁琐步骤，所有今天实现了下这个功能，将文本复制到剪切板。

为了兼容所有主流浏览器，我们需要用到ZeroClipboard.js插件和ie内置事件execCommand()，此插件一定要上传到服务器端才会生效(你也可以搭建本地服务器)，一些注意事项已经写在了代码中，示例如下：

如果一开始就加载ZeroClipboard.min.js在ie6、7、8会报图示错误，所以我们判断当前浏览器是否是ie8，之后再确定是否加载js

详细教程，请查看 跨浏览器复制神器 ZeroClipboard 2.x快速入门详解

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>demo</title>  
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<script src="../js/jquery-1.11.3.min.js"></script>  
 
<body>  
  <input type="button" id="copy" value="复制文本框文字" data-clipboard-target="content">  
  <p></p>
  <textarea id="content" cols="30" rows="10">一段测试文字！</textarea>  
  <script>  
  
    if(ieTest()) {//是ie8，使用ie内置事件execCommand()  
        $("p").text("IE8.0");  
        $("#copy").click(function() {  
          copyUrl2();  
        });  
        function copyUrl2() {  
          var Url2 = $("#content");  
          Url2.select(); //选择对象  
          document.execCommand("Copy"); //执行浏览器复制命令;  
        }  
    }else {//不是ie8，就加载ZeroClipboard.js  
        $("p").text("Not IE8.0");  
        $("<script>").attr({"src": "js/ZeroClipboard.min.js"}).appendTo($("body"));  
        var clip = new ZeroClipboard($("#copy"));  
    }  
      
  
    function ieTest() {  
        var browser = navigator.appName,  
            b_version = navigator.appVersion,  
            version = b_version.split(";");  
        if(version[1]) {//ff下不存在version[1]，会报错  
            var trim_Version = version[1].replace(/[ ]/g, "");  
            if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE8.0") {//在ie6、7浏览器里，只需改成相应版本号  
                return true;  
            }  
        }  
          
    }  
      
      
  </script>  
</body>  
</html>