复制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的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
JS+Canvas 实现下雨下雪效果
May 18 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
Move.js入门
Feb 08 Javascript
详解Vue.use自定义自己的全局组件
Jun 14 Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 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
php 动态多文件上传
2009/01/18 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
js no-repeat写法 背景不重复
2009/03/18 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
Python异常处理总结
2014/08/15 Python
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
pandas 层次化索引的实现方法
2019/07/06 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
python mock测试的示例
2020/10/19 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
实习销售业务员自我鉴定
2013/09/21 职场文书
李白故里导游词
2015/02/12 职场文书
Django REST framework 限流功能的使用
2021/06/24 Python
Pandas 稀疏数据结构的实现
2021/07/25 Python
python可视化大屏库big_screen示例详解
2021/11/23 Python