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实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
基于jquery.page.js实现分页效果
Jan 01 jQuery
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
js实现3D照片墙效果
Oct 28 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 Javascript
Element el-button 按钮组件的使用详解
Feb 01 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
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
three.js 入门案例详解
2018/01/23 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
Python类的多重继承问题深入分析
2014/11/09 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
详解如何减少python内存的消耗
2019/08/09 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
木工主管岗位职责
2013/12/08 职场文书
投资入股合作协议书
2014/10/28 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
Python编程super应用场景及示例解析
2021/10/05 Python
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android