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 相关文章推荐
JS中==与===操作符的比较
Mar 21 Javascript
JavaScript 乱码问题
Aug 06 Javascript
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 Javascript
VUE 使用中踩过的坑
Feb 08 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 Javascript
vue 导出文件,携带请求头token操作
Sep 10 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 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
Home Coffee Roasting
2021/03/03 咖啡文化
在PHP中实现Javascript的escape()函数代码
2010/08/08 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
小程序实现选择题选择效果
2018/11/04 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
python 两个数据库postgresql对比
2019/10/21 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
公司爱心捐款倡议书
2014/05/14 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript