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

第一个是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. vue父子间通信

    父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...

  2. fms +fme 视频直播

    1.安装fms 按默认安装即可 2.安装fme 安装完成后启动fme FMS URL是发布到fms的地址默认就可以, 然后点击 Connect 连接成功后左下角会出现connected的提示, 然后点 ...

  3. part1:8-远程登录Linux

    Linux远程登录 Linux系统中是通过ssh服务实现的远程登录功能.默认ssh服务开启了22端口,而且在安装完成系统时,这个服务已经安装,并且是开机启动的.所以不需要额外配置就能直接远程登录Lin ...

  4. proc demo

    源文件test.pc #include <stdio.h> #include <string.h> #include <stdlib.h> #include &qu ...

  5. pageX/pageY,screenX/screenY,clientX/clientY的差别

    pageX/pageY,screenX/screenY,clientX/clientY的差别 $(document).click(function(e){ //x方向无差别 //alert(e.pag ...

  6. kubernetes pod、service文件yaml模版格式

    apiVersion: v1 #必选,版本号,例如v1,版本号必须可以用 kubectl api-versions 查询到 . kind: Pod #必选,Pod metadata: #必选,元数据 ...

  7. 在windows7下创建ftp服务站点

    1.开始->控制面板->程序(点击“卸载程序”)->启动或关闭windows功能->Internet Information Services(Internet信息服务)-&g ...

  8. 在“开始”菜单中的“运行”一栏输入特定命令打开windows程序

    winver 检查Windows版本   wmimgmt.msc 打开Windows管理体系结构(wmi)   wupdmgr Windows更新程序   wscript Windows脚本宿主设置 ...

  9. "请求被中止: 未能创建 SSL/TLS 安全通道"解决办法

    1.安装证书: 手动双击证书安装,过程略 2.分配权限: 在控制台中找到安装的证书,右键选择“管理私钥”, 添加自己需要的权限,如果在测试可以直接添加Everyone 3.修改代码:public st ...

  10. 基于Verilog HDL的二进制转BCD码实现

    在项目设计中,经常需要显示一些数值,比如温湿度,时间等等.在数字电路中数据都是用二进制的形式存储,要想显示就需要进行转换,对于一个两位的数值,对10取除可以得到其十位的数值,对10取余可以得到个位的数 ...