复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题


Posted in Javascript onJune 21, 2010

复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
但IE6两行JS代码就可以,IE7以上也差不多,只不过出来一个安全提示比较恶心,用户如果看到了,一定有怀疑;
再但就是Firefox、Chrome等根本就不让你复制;
记得以前网上有这方面的代码,找了一下,发现全部不能在firefox3.5以上的版本中应该,最后终于找到了一个,代码还相当相当的复杂,不太敢用。
最后,憋的实在没有办法了,查了查资料,自已写了一个:
主要的理解的几个点:
1、Firefox这些浏览器,出于安全考虑吧,直接是不让复制的;
2、在Flash中,可以用System.setClipboard(),把内容扔到剪贴板上,然后再让FLASH工作在Firefox下;
3、在Flash播放器10.0之后呢,也是出于安全考虑吧,System.setClipboard的内容必须在FLASH里边;
4、用ExternalInterface可以和JS通信;
5、ExternalInterface在flash8中必须引用一下才可以;
默认的HTML代码:

<input type="text" id="testInput" name="testInput" value="4234324234" /> 
<div id="buttonBox"> 
<button onclick="copy('testInput')">copy</button> 
</div>

所以,设计的时候,先作第一个判断,如果是IE,就还用默认的代码,这样最没有问题,如果不是,就用一个FLASH把默认的按钮覆盖;
if (window.XMLHttpRequest){//如果不是IE时,就用FLASH的方式复制 
$('buttonBox').innerHTML = '<embed src="flashCopy.swf" width="48" 
height="23" quality="high" 
pluginspage="http://www.macromedia.com/go/getflashplayer" 
type="application/x-shockwave-flash"></embed>'; 
}

以下是所有的JS文件:
<script> 
function $(id){ 
return document.getElementById(id); 
} 
function copy(){//ie6 
var value = $('testInput').value; 
window.clipboardData.clearData(); 
window.clipboardData.setData("Text", value); 
alert('复制成功!'); 
} 
function flashCopy(){//firefox ....... 
return $('testInput').value; 
} 
function flashCopyBack(){ 
alert('复制成功!'); 
} 
if("v" != "v"){//如果不是IE时,就用FLASH的方式复制 
$('buttonBox').innerHTML = '<embed src="111.swf" width="48" height="23" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>'; 
} 
</script>

FLASH按钮的代码如下:
on (release) { 
import flash.external.ExternalInterface; 
var inputText = ExternalInterface.call('flashCopy'); 
System.setClipboard(inputText); 
ExternalInterface.call('flashCopyBack'); 
//_root.boboText.text = inputText; 
}

原理,就是避开那个安全上的限制,在点FLASH中的按钮时,通过FLASH中的代码去调页面中的JS代码,JS代码可以拿到INPUT中的值,然后再传给FLASH,这时,FLASH中就有了这些值了,然后,FLASH自已再通过System.setClipboard把这些值存到剪贴板上; 再然后,他再去调用页面中的flashCopyBack,flashCopyBack只干一件事,就是提示已复制成功!
我在Firefox、chrome、ie中都测过了,没有问题,如果谁发现有问题,请告诉我,谢谢,因为我现在已经开始用!
转载请注明出处:子鼠
Javascript 相关文章推荐
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 #Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 #Javascript
一段批量给页面上的控件赋值js
Jun 19 #Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 #Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 #Javascript
WEB高性能开发之疯狂的HTML压缩
Jun 19 #Javascript
Html中JS脚本执行顺序简单举例说明
Jun 19 #Javascript
You might like
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
解析PHP提交后跳转
2013/06/23 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
javascript常用函数(1)
2015/11/04 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
python学习 流程控制语句详解
2016/06/01 Python
django页面跳转问题及注意事项
2019/07/18 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
企业管理培训感言
2014/01/27 职场文书
婚前财产协议书范本
2014/10/19 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
单位工作证明范本
2015/06/15 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
JS数组去重详情
2021/11/07 Javascript
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android