复制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 相关文章推荐
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
javascript实现页面滚屏效果
Jan 17 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
vue项目打包上传github并制作预览链接(pages)
Apr 19 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 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
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
JS继承 笔记
2011/07/13 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
JS中的BOM应用
2018/02/02 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
Python如何实现FTP功能
2020/05/28 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
Python Django搭建网站流程图解
2020/06/13 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
几道PHP面试题
2013/04/14 面试题
前台文员岗位职责
2013/12/28 职场文书
求职简历的自我评价
2014/01/31 职场文书
检查接待方案
2014/02/27 职场文书
优秀食品类广告词
2014/03/19 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
团拜会策划方案
2014/06/07 职场文书
安全责任书范文
2014/08/25 职场文书
考试作弊检讨书
2015/01/27 职场文书
办公室主任岗位职责
2015/01/31 职场文书
仙境之桥观后感
2015/06/16 职场文书