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 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
javascript 写类方式之二
Jul 05 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
EsLint入门学习教程
Feb 17 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
详解用node编写自己的cli工具
May 23 Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
vue-swiper的使用教程
Aug 30 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
vue 之 css module的使用方法
Dec 04 Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 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 stripos()函数及注意事项的分析
2013/06/08 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
javascript关于继承解析
2016/05/10 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
python网络编程之读取网站根目录实例
2014/09/30 Python
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
静心口服夜广告词
2014/03/20 职场文书
信访工作经验交流材料
2014/05/23 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
大二学年个人总结
2015/03/03 职场文书
门店店长岗位职责
2015/04/14 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers