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

第一个是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. 什么是Jenkins 以及如何使用？

    Jenkins是什么? Jenkins是一个功能强大的应用程序,允许持续集成和持续交付项目,无论用的是什么平台.这是一个免费的源代码,可以处理任何类型的构建或持续集成.集成Jenkins可以用于一些测 ...

  2. shell的一些简单用法

    一 BASH的属性 BASH中会存储一些自身属性的参数,启用或关闭某一项功能 例如控制* .字符是否为通配 查看参数 set -o 关闭noglob参数 set -o noglob ls * ls: ...

  3. 2018.09.24 bzoj4977: [[Lydsy1708月赛]跳伞求生（贪心+线段树）

    传送门 线段树好题. 这题一看我就想贪心. 先把a,b数组排序. 然后我们选择a数组中最大的b个数(不足b个就选a个数),分别贪心出在b数组中可以获得的最大贡献. 这时可以用线段树优化. 然后交上去只 ...

  4. 2018.09.06 警卫安排（树形dp）

    描述 太平王世子事件后,陆小凤成了皇上特聘的御前一品侍卫. 皇宫以午门为起点,直到后宫嫔妃们的寝宫,呈一棵树的形状:有边直接相连的宫殿可以互相望见.大内保卫森严,三步一岗,五步一哨,每个宫殿都要有人全 ...

  5. SPSS-非参数检验—两独立样本检验 案例解析

    今天跟大家研究和分享一下:spss非参数检验——两独立样本检验, 我还是引用教程里面的案例,以:一种产品有两种不同的工艺生产方法,那他们的使用寿命分别是否相同 下面进行假设:1:一种产品两种不同的工艺 ...

  6. chrome添加 postman扩展程序图文简介

    Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件.无论是web前端开发 或 android.ios开发,只要涉及调用后端接口,postman这类型工具就必不可少了.相对于 ...

  7. 对比手机SLAM和机器人SLAM

    陀螺仪?? IMU?? 加速度器与?? 人与机器 惯性定位与?? 步骤上对比Project Tango与SLAM

  8. float 为什么不能用== ，或者大于等于，或者小于等于

    本文尝试着将以下内容做一个浅显的解释,主要包括浮点数为什么是不精确的,浮点数为什么不能用==和!=直接比较,以及浮点数的比较方法等几个方面.如果那个地方说的不对还请各位看官不吝赐教!欢迎大家评论区讨论 ...

  9. Ansible基本命令

    Ansible安装完成之后就自带很多命令,其中较常用的有7个: ansible ansible-doc ansible-galaxy ansible-init ansible-playbook ans ...

  10. java Map集合学习

    学习语法还是从例子着手: FileDao fileDao=new FileBeanDaoImpl(); FileBean fileBean=new FileBean(); listBean=fileD ...