javaScript复制功能调用实现方案


Posted in Javascript onDecember 13, 2012
验证码:<input type="text" id="code"/> <input type="button" value="复制" onclick="fuzhi()"> 
<script type="text/javascript"> 
function fuzhi(){ 
var codeVal=jQuery("#code").val(); 
alert(codeVal); 
if (navigator.userAgent.toLowerCase().indexOf('ie') > -1) { //IE浏览器 
clipboardData.setData('Text', codeVal); 
alert("已经复制到剪切板"); 
} else { 
prompt("请复制:", codeVal); 
} 
// window.clipboardData.setData("Text",jQuery("#code").val()); 
} 
</script>

最近都没有什心情去写博文,主要因为心烦的事情渐渐多起来了。
哎!离题了,回到这篇文章了。说到使用js实现点击复制的功能,我下面想说的方法也是和网上的大同小异的。js实现是很简单,最难的是兼容问题,毕竟用IE以外的人还是有很多的。这里,我也是根据网上的相关资源总结一下方法。

方法一,逐一判别处理法
方法很简单也很容易懂,就是通过判断客户端浏览器类别,来执行不同的js代码来实现复制功能。虽然从理论上来说,这样是行得通得。但是,事实并没有我们想得那么容易。因为我们并不太清楚一些浏览器下js复制代码的写法,至少我所知道的也就是IE和FF。

如果只是兼容IE和FF的话,那么简单得多了。这里我使用一个网上比较有名的判断IE核的方法,13字节法,这个也是我常用的。

if("\v"=="v") {//13个字节 
//这里是IE核,执行的代码,亲测兼容IE8 
}else{ 
//非IE核执行代码 
}

这里我写个大概的实现复制的构架,具体代码我不粘上来的,网上可以很简单就找到,给大家参考
function clipBoard(object){ 
//获取object的值,即复制内容 
var copyTxt=document.getElementById(object).value; 
//调用copy2Clipboar来实现浏览器,判断及执行代码 
if(copy2Clipboard(copyTxt)!= false){ 
alert('复制成功'); 
} 
} 
copy2Clipboard = function(txt){ 
if("\v"=="v"){ 
//IE浏览器执行代码 
window.clipboardData.clearData(); 
window.clipboardData.setData("Text",txt); 
return true; 
}else if(navigator.userAgent.indexOf("Firefox")>0){ 
//Firefox浏览器 
return true; 
}else if(window.google && window.chrome){ 
//chrome浏览器 
return true; 
}else{ 
alert("浏览器不支持"); 
return false; 
} 
}

根据需要可以自行添加不同的判断浏览器代码,实现该浏览器下的复制功能。一般情况下,根据IE > FF > opera/chrome>其他,这样的顺序进行判断。

方法二,flash间接处理法
原理很简单,通过创建一个flash,将复制的内容以变量的方式传递给flash,flash再将内容复制到内存中,这样就实现了复制的功能。只要支持flash,按理上是可以兼容绝大部分的浏览器的,这个方法是我今天看到的,也测试验证了。

安装及使用方法,可以在上面两个网址上找到,E文版,中文版只有通过搜索去找咯!
这里我提供一下实现框架的简单版,这里有用到上面的实现方式。这里有修改的,根据官方版说明方法,在单页面很容易就能实现该功能,但是在实际应用到某些CMS中,可能会遇到一些问题。什么问题呢?IE核页面会弹出 “该页面已终止”。原因很简单,就是js加载未完成就调用。竟然是IE的问题,那么我们就可以使用判断IE的方法,将IE独立出来,其他核就使用flash方法实现。

function checkClient(object){//判断浏览器 
var copyTxt=document.getElementById(object).value; //获取复制的内容 
if("v"!="v"){ 
//这里根据官方文档设置 
//这里设置flash位置,绝对相对都可以 
ZeroClipboard.setMoviePath('ZeroClipboard.swf'); 
//创建一个复制对象 
var clip = new ZeroClipboard.Client(); 
//设置手形 
clip.setHandCursor(true); 
//设置复制的内容 
clip.setText(copyTxt); 
//设置触发对象 
>clip.glue('d_clip_button'); 
} 
}

这里用于判断是否为IE核,IE核将不使用flash处理法,直接使用复制机制
//复制处理 
function clipBoard(object){ 
var copyTxt=document.getElementById(object).value; 
if(copy2Clipboard(copyTxt)!= false){ 
alert('复制成功'); 
} 
} 
copy2Clipboard = function(txt){ 
if("\v"=="v") { //判断是否是IE浏览器 
window.clipboardData.clearData(); 
window.clipboardData.setData("Text",txt); 
return true; 
} 
else{ //非IE核直接返回 
return true; 
}

以上为第二种方法的最简单设置方法,将代码放到<head></head>之间即可不管是第一种,还是第二种方法都要在需要复制的页面上添加下面两行代码
设置复制内容的文本域
<input type="text" id="textinfo" 
onmouseout="checkClient('textinfo')" value="复制的内容" size="65"/>

设置触发对象按钮
<div id="d_clip_button" onclick="copyCode('textinfo')">复制地址</div>

这是第二种方法才要添加的,设置检测浏览器
<script>checkClient('textinfo');</script>

写到这里,大概的步骤就是这样了,其中还有些id的名称可以按需要修改。至少完整代码,可以参考官方的demo。
累了。
Javascript 相关文章推荐
jquery下onpropertychange事件的绑定方法
Aug 01 Javascript
菜鸟javascript基础资料整理2
Dec 06 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 Javascript
js仿iphone秒表功能 计算平均数
Jan 11 Javascript
微信小程序获取用户openId的实现方法
May 23 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
vue按需加载实例详解
Sep 06 Javascript
js遍历td tr等html元素
Dec 13 #Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 #Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 #Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 #Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 #Javascript
javascript实现图片切换的幻灯片效果源代码
Dec 12 #Javascript
javascript跑马灯悬停放大效果实现代码
Dec 12 #Javascript
You might like
php遍历数组的方法分享
2012/03/22 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
python list语法学习(带例子)
2013/11/01 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
python绘制多个曲线的折线图
2020/03/23 Python
创建Django项目图文实例详解
2019/06/06 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
岗位职责定义及内容
2013/11/08 职场文书
项目计划书范文
2014/01/09 职场文书
校园之声广播稿
2014/01/31 职场文书
会计电算化大学生职业规划书
2014/02/05 职场文书
表演方阵解说词
2014/02/08 职场文书
公立医院改革实施方案
2014/03/14 职场文书
质量月口号
2014/06/20 职场文书
卖车协议书范例
2014/09/16 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书