先来看下本次需要导入的文件：

第一个是jquery.js，这个不多说；

第二个是jquery.zclip.js，第三个是zeroClipboard.swf ，这两个文件的下载链接：http://www.bootcdn.cn/zclip/

那么如何使用上面链接 呢？

1. 复制上面链接在浏览器打开，其中zeroClipboard.swf打开会直接下载，如果你的浏览器不会直接下载，可以ctrl+s保存到本地，下载成功后会提示下面的信息，点击“保留”即可，然后复制到项目制定目录下（path配置项的路径可是该目录的绝对路径，也可以是相对路径，我在调试的时候发现，直接复制上面链接放在path里面会报错的。）

2.插件的话，根据需要下载源文件还是压缩文件，这里下载的是  jquery.zclip.js，下载方法同上（复制链接打开，ctrl+s保存在本地，可以直接使用该链接）。

先看第一个效果图：

点击复制链接，复制输入框的内容到粘贴板上。下面是html代码，比较粗糙。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <input type="text" value="www.baidu.com" id="link">

        <span id="copyBtn">复制链接</span>

        <script src="jquery.min.js"></script>

        <script src="jquery.zclip.js"></script>

        <script>

            $('#copyBtn').zclip({

                path: "zeroClipboard.swf",

                copy: function(){

                    return $('#link').val();

      　　　 　　    },

                afterCopy:function(){/* 复制成功后的操作 */

                    alert("复制成功！");

                }

            });

        </script>

    </body>

</html>

以上代码经测试，在IE8下点击是没有效果的。因为不知道如何使这个插件兼容IE8，所以下面换一种方式来兼容IE8：

点击按钮后的弹框效果图：

实现代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div class="sharebtn">复制</div>

        <!--IE8下显示的复制分享链接弹框-->

        <div id="copyLayer" style="display: none;padding: 3%;">

            <p>方法一： 快捷键Ctrl+c 复制</p>

            <p>方法二： 鼠标右键选择复制</p>

            <textarea id="copyContent" name="" rows="6" style="width: 98%;"></textarea>

        </div>

        <script src="jquery.min.js"></script>

        <script src="jquery.zclip.js"></script>

        <script src="layer/layer.js"></script>

        <script>

            var urlPath = window.location.href;

            $('.sharebtn').click(function(){

                //如果$.support.leadingWhitespace为false，则是IE8及以下浏览器

                if(!$.support.leadingWhitespace){

                    layer.open({

                        type: 1,  //html内容显示模式

                        title:  ['复制链接分享', 'font-size:16px;'],

                        area: ['500px', '300px'], //宽高

                        content: $("#copyLayer"),

                        btn: '确定',

                        offset: '30%',

                        shade: 'background-color: rgba(0,0,0,.5)',

                        success: function(){

                            $("#copyContent").val(urlPath);  //显示链接内容

                            $("#copyContent").select();  //选中链接内容

                        }

                    });

                }

            })

            //IE9+及主流浏览器

            if($.support.leadingWhitespace){

                //链接复制分享 - 点击复制

                $('.sharebtn').zclip({

                    path: "zeroClipboard.swf",

                    copy: function(){

                        return urlPath;

              　　　 　 },

                    afterCopy:function(){

                        layer.open({

                            content: '复制成功!',

                            btn: '确定',

                            time: 3000,

                            offset: '30%',

                            shade: 'background-color: rgba(0,0,0,.5)',

                            shadeClose: true

                        });

                    }

                });

            }

        </script>

    </body>

</html>

这里是通过判断是否是IE8浏览器，自动选中分享链接，但是需要通过手动复制，最终实现分享功能。

js插件实现点击复制内容到粘贴板，兼容IE8的更多相关文章

  1. js点击按钮复制内容到粘贴板

    复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令: //复制内容到粘贴板 function copyToClipboar ...

  2. js实现复制内容到粘贴板

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. js复制内容到粘贴板

    点击右边内容:<span onclick="copyContent(this);" title="点击复制">啊,我被复制了</span> ...

  4. vue 复制内容到粘贴板

    首先是npm安装依赖包:npm install clipboard --save 导入组件:import Clipboard from "clipboard"; html如图: c ...

  5. js 复制内容到粘贴板的兼容性

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs& ...

  6. vue复制textarea文本域内容到粘贴板

    vue实现复制内容到粘贴板   方案:找到textarea对象(input同样适用),获取焦点,选中textarea的所有内容,并调用document.execCommand("copy&q ...

  7. Zclip点击复制内容到剪贴板兼容各浏览器

    WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制, ...

  8. 用js实现复制内容到操作系统粘贴板(兼容IE、谷歌、火狐等浏览器)

    一.如果只考虑IE浏览器,可以直接用原声js实现 if(window.clipboardData){ //清空操作系统粘贴板 window.clipboardData.clearData(); //将 ...

  9. 原生js实现复制文本到粘贴板

    项目中经常会遇到点击按钮复制订单号.订单id等内容到粘贴板中的需求.可是通常我们都是用Ctrl + c或右击复制的,别操心,js也是有复制命令的,那就是document.execCommand('co ...

随机推荐

  1. mathematica9激活

    1.打开m9软件 2.打开keygen软件 3.点手动输入验证码,输入里面的id到keygen软件再点save mathpath 4.复制keygen软件里面 的mathpass到 将生成的mathp ...

  2. 硬件GPIO,UART,I2C,SPI电路图

  3. 2018.09.08 bzoj4518: [Sdoi2016]征途（斜率优化dp）

    传送门 把式子展开后发现就是要求: m∗(∑i=1msum′[i])−sum[n]2" role="presentation" style="position: ...

  4. 着重基础之—Java 8 Comparator: How to Sort a List （List排序）

    着重基础之—Java 8 Comparator: How to Sort a List (List排序) 首先申明,这篇博客的内容不是我自己的知识,我是从国外网站搬来的,原因有二:1是因为大天朝对网络 ...

  5. BaseAdapter

    作者通过Java代码来实现布局,而我习惯通过.xml文件来实现,所以我对程序做了如下修改 MainActivity.java public class MainActivity extends Act ...

  6. UVa 11992 Fast Matrix Operations （线段树，区间修改）

    题意:给出一个row*col的全0矩阵,有三种操作 1 x1 y1 x2 y2 v:将x1 <= row <= x2, y1 <= col <= y2里面的点全部增加v: 2 ...

  7. Win7下U盘安装CentOS-7-x86_64-DVD-1503-01

    转载自:http://blog.sina.com.cn/s/blog_842d5c8a0102vr12.html 昨天在Win7下装CentOS7,本以为之前装CentOS6.5很熟练了,结合网上的帖 ...

  8. Spring 集成 MemCache

    1)xml <bean class="com.danga.MemCached.SockIOPool" factory-method="getInstance&quo ...

  9. authentication 和 authorization

    单词 词性 解释 authentication n. 认证 authentic adj. 真实的 authorization n. 授权 authorise vt. 授权 authentication ...

  10. linux常见命令整理

    Linux管理文件和目录的命令 命令 功能 命令 功能 pwd 显示当前目录 ls 查看目录下的内容 cd 改变所在目录 cat 显示文件的内容 grep 在文件中查找某字符 cp 复制文件 touc ...