复制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 相关文章推荐
javascript实用小函数使用介绍
Nov 11 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
js中substring和substr的定义和用法
May 05 Javascript
JS简单计算器实例
Jan 20 Javascript
Javascript节点关系实例分析
May 15 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
js如何获取网页所有图片
May 12 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 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版本号
2006/10/09 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
Javascript 继承机制的实现
2009/08/12 Javascript
javascript 命名规则 变量命名规则
2010/02/25 Javascript
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
常见的python正则用法实例讲解
2016/06/21 Python
Python制作词云图代码实例
2019/09/09 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
Keras搭建自编码器操作
2020/07/03 Python
序列化Python对象的方法
2020/08/01 Python
使用Python实现音频双通道分离
2020/12/25 Python
Python try except else使用详解
2021/01/12 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
自我鉴定注意事项
2014/01/19 职场文书
2014年新生军训方案
2014/05/01 职场文书
安全环保演讲稿
2014/08/28 职场文书
办公室主任个人总结
2015/02/28 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
建党伟业电影观后感
2015/06/01 职场文书