复制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导出txt示例代码
Jan 14 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
菊花转动的jquery加载动画效果
Aug 19 jQuery
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
JS实现音乐导航特效
Jan 06 Javascript
基于js实现数组相邻元素上移下移
May 19 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设计模式 php实现门面模式(Facade)
2015/12/07 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
jQuery截取指定长度字符串代码
2014/08/21 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
vue router的基本使用和配置教程
2018/11/05 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
jQuery无冲突模式详解
2019/01/17 jQuery
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
python轻松查到删除自己的微信好友
2016/01/10 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
python购物车程序简单代码
2018/04/18 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
对python sklearn one-hot编码详解
2018/07/10 Python
Django中间件基础用法详解
2019/07/18 Python
python实现ftp文件传输功能
2020/03/20 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
金鑫耀Java笔试题
2014/09/06 面试题
科研先进个人典型材料
2014/01/31 职场文书
2014年秘书工作总结
2014/11/25 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书