复制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 相关文章推荐
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
Mar 26 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jQuery实现简单QQ聊天框
Aug 27 jQuery
HTML+JS实现在线朗读器
Feb 15 Javascript
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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
PHP的历史和优缺点
2006/10/09 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
jQuery事件详解
2017/02/23 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
python在文本开头插入一行的实例
2018/05/02 Python
Python 加密与解密小结
2018/12/06 Python
Python列表(List)知识点总结
2019/02/18 Python
python绘制分布折线图的示例
2020/09/24 Python
python3中布局背景颜色代码分析
2020/12/01 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
2013年入党人员的自我鉴定
2013/10/25 职场文书
施工资料员的岗位职责
2013/12/22 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android
基于Python实现对比Exce的工具
2022/04/07 Python