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 相关文章推荐
Javascript 获取字符串字节数的多种方法
Jun 02 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
jquery radio的取值_radio的选中_radio的重置方法
Sep 20 Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 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一些服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
php之readdir函数用法实例
2014/11/13 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python画图学习入门教程
2016/07/01 Python
Python中字符串的修改及传参详解
2016/11/30 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
django使用channels实现通信的示例
2020/10/19 Python
opencv实现图像平移效果
2021/03/24 Python
安全资金保障制度
2014/01/23 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
2015年度物流工作总结
2015/04/30 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
Java 多线程协作作业之信号同步
2022/05/11 Java/Android