js插件实现点击复制内容到粘贴板,兼容IE8
先来看下本次需要导入的文件:
第一个是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的更多相关文章
- js点击按钮复制内容到粘贴板
复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令: //复制内容到粘贴板 function copyToClipboar ...
- js实现复制内容到粘贴板
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- js复制内容到粘贴板
点击右边内容:<span onclick="copyContent(this);" title="点击复制">啊,我被复制了</span> ...
- vue 复制内容到粘贴板
首先是npm安装依赖包:npm install clipboard --save 导入组件:import Clipboard from "clipboard"; html如图: c ...
- js 复制内容到粘贴板的兼容性
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs& ...
- vue复制textarea文本域内容到粘贴板
vue实现复制内容到粘贴板 方案:找到textarea对象(input同样适用),获取焦点,选中textarea的所有内容,并调用document.execCommand("copy&q ...
- Zclip点击复制内容到剪贴板兼容各浏览器
WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制, ...
- 用js实现复制内容到操作系统粘贴板(兼容IE、谷歌、火狐等浏览器)
一.如果只考虑IE浏览器,可以直接用原声js实现 if(window.clipboardData){ //清空操作系统粘贴板 window.clipboardData.clearData(); //将 ...
- 原生js实现复制文本到粘贴板
项目中经常会遇到点击按钮复制订单号.订单id等内容到粘贴板中的需求.可是通常我们都是用Ctrl + c或右击复制的,别操心,js也是有复制命令的,那就是document.execCommand('co ...
随机推荐
- scrapy官方安装方法
安装依赖 sudo apt-get install python-dev python-pip libxml2-dev libxslt1-dev zlib1g-dev libffi-dev libss ...
- 基于beego orm 针对oracle定制
目前golang的ORM对oracle支持都没有mysql那样完整,一个orm要同时兼容mysql和oracle由于在sql语法上区别,会使整orm变的非常臃肿. 本项目是在beego orm上修改, ...
- DIV+CSS实战(五)
一.说明 前面实现了关键词订阅模块,现在实现站点订阅模块,主要实现的是站点添加界面.站点添加界面里面实现一个提示框不在提示的功能(保存到cookie中),还有就是实现一个站点的选择框,包括输入文字自动 ...
- 解决:无法在发送 HTTP 标头之后进行重定向。 跟踪信息: 在 System.Web.HttpResponse.Redirect(String url, Boolean endResponse, Boolean permanent) 在 System.Web.Mvc.Async.AsyncControllerActionInvoker.<>……
问题:在MVC的过滤器中验证用户状态时报如下错误: 无法在发送 HTTP 标头之后进行重定向. 跟踪信息: 在 System.Web.HttpResponse.Redirect(String ...
- vc创建模态和非模态对话框
模态对话框的创建 创建模态对话框需要调用CDialog类的成员函数:DoModal,该函数的功能就是创建并显示一个模 态对话框,关闭模态对话框的函数是EndDialog,该函数需要一个参数,这个参数就 ...
- Sometimes , less is more
给小团队的特别建议 小团队的普遍现象在于人力紧张,不管是在创业公司还是在大公司内.对于不写代码就手痒的技术人员,如果再在技术上有点儿完美主义情节,那真是可以为代码鞠躬尽瘁的.稍微一整理,事情恨不得已经 ...
- NC入门笔记
简介: NC(全名NetCat),在网络界有"瑞士军刀"的美誉.它小巧而强悍,被设计成一个稳定的后门工具,能够直接由其它程序和脚本轻松驱动.同时,它也是一个功能强大的网络调试和探测 ...
- 一致性哈希算法和Go语言实现
一致性哈希算法,当我第一次听到这个名字的时候,感觉特别高深.而它往往会和分布式系统相关,准确的说,是分布式缓存. 在Web服务中,缓存是介于数据库和服务端程序之间的一个东西.在网站的业务还不是很大的时 ...
- (原创)hibernate 一对多建表实例详解 附上各个注释的含义
这个是hibernate的一对多建表实例:一的一端是部门(Department),对的一端是员工(Employee),下面贴上成员源代码:其中@mappedBy是加在@OneToMany一端,并且它的 ...
- Delphi 动态与静态调用DLL(最好的资料)
摘要:本文阐述了 Windows 环境下动态链接库的概念和特点,对静态调用和动态调用两种调用方式作出了比较,并给出了 Delphi 中应用动态链接库的实例. 一.动态链接库的概念 动态链接库( ...