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在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
vue 表单输入格式化中文输入法异常问题
May 30 Javascript
微信小程序按钮点击跳转页面详解
May 06 Javascript
微信小程序实现手势滑动卡片效果
Aug 26 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 Javascript
学前端,css与javascript重难点浅析
Jun 11 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多例模式介绍
2013/06/24 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
Egret引擎开发指南之编译项目
2014/09/03 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
bootstrap table实例详解
2017/01/06 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
使用python实现rsa算法代码
2016/02/17 Python
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
Python中的全局变量如何理解
2020/06/04 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
韩国商务邀请函
2014/01/14 职场文书
个人实习生的自我评价
2014/02/16 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
员工趣味活动方案
2014/08/27 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
学校实习推荐信
2015/03/27 职场文书
采购内勤岗位职责
2015/04/13 职场文书
2016教师国培研修感言
2015/12/08 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang