由chrome剪贴板问题研究到了js模拟鼠标键盘事件
写在前面
最近公司在搞浏览器兼容的事情,所有浏览器兼容的问题不得不一个人包了。下面来说一下今天遇到的一个问题吧
大家都知道IE下面如果要获得剪贴板里面的信息的话,代码应该如下所示
window.clipboardData.getData("Text")
可是在chrome下面就行不通了,chrome下面没有类似ie的这种方法,那应该怎么办呢,百度了一下,发现还真有办法。
只要在HTML界面上放上一个text类型的控件,如下所示
<textarea id="textArea" ></textarea>
然后js代码这样写就可以了,不过要在body上绑定keydown事件,写上
<body onkeydown="return cellkeydown(event)">
function cellkeydown(event) {
if (event.ctrlKey && event.keyCode == 86) {
var ss = document.getElementById("textArea");
ss.focus();
ss.select();
// 等50毫秒,keyPress事件发生了再去处理数据
setTimeout("dealwithData()", 50);
}
}
function dealwithData(event) {
var ss = document.getElementById("textArea");
alert(ss.value);
ss.blur(); }
把代码这样一写就发现在任何其它应用程序复制的信息,在当前运行的界面上只要按ctrl+v就可以把剪贴板里面的信息获得。
哈哈,以为大功告成,却发现事件远没那么简单!
事件没完没了了
原来在原先的界面上,只有一个“粘贴”按钮,跟测试那边沟通,没法聊下去,不能按ctrl+v来获得剪贴板里面的信息,必须按按钮,不能改变用户之前的行为。好吧,既然这样,只能想想用js模拟键盘事件啦。
找了好多一堆资料,总结了如下规则。
Dom 事件模拟可以通过document上的createEvent()方法,有如下一些事件
UIEvents:通用的UI 事件,鼠标事件键盘事件都是继承自UI事件,在DOM 3 级上使用的是 UIEvent。
MouseEvents:通用的鼠标事件,在DOM 3 级上使用的是 MouseEvent。
MutationEvents:通用的突变事件,在DOM 3 级上使用的是 MutationEvent。
HTMLEvents:通用的HTML事件,在DOM3级上还没有等效的。
键盘事件initKeyBoadEvent()方法初始化,初始化键盘事件的参数有以下几个:
type (string) - 要触发的事件类型,例如“keydown”.
bubbles (Boolean) — 代表事件是否应该冒泡.
cancelable (Boolean) — 代表事件是否可以被取消.
view (AbstractView) — 被授予事件的是图. 通常值为:document.defaultView.
key (string) — 按下的键对应的code.
location (integer) — 按下键所在的位置. 0 :默认键盘, 1 左侧位置, 2 右侧位置, 3 数字键盘区, 4 虚拟键盘区, or 5 游戏手柄.
modifiers (string) — 一个有空格分开的修饰符列表.
repeat (integer) — 一行中某个键被按下的次数.
在FF下,允许你通过使用document.createEvent('KeyEvents'),这种方式来创建键盘事件,初始化的方法为initKeyEvent(),这个方法接受10个参数,
type (string) — 要触发的事件类型,例如“keydown”.
bubbles (Boolean) — 代表事件是否应该冒泡.
cancelable (Boolean) — 代表事件是否可以被取消.
view (AbstractView) — 被授予事件的是图. 通常值为:document.defaultView.
ctrlKey (Boolean) — 代表ctrol键是否按下. 默认 false.
altKey (Boolean) — 代表alt键是否按下. 默认 false.
shiftKey (Boolean) — 代表shift键是否按下. 默认 false.
metaKey (Boolean) — 代表meta键是否按下. 默认 false.
keyCode (integer) — 键按下或释放时键所对应的键码. 默认是0;
charCode (integer) — 按下的键的字符所对应的ASCII code.是共keypress事件使用的 默认是0.
具体API详细信息可以参考浅谈Javascript事件模拟
琢磨了好久终于找到解决方案(可是还有瑕疵)
具体解决方案还参考了如下网页键盘按键事件的fireEvent
先把代码贴上,终于解决了js模拟事件了,也触发了ctrl+v,却发现获得的剪贴板里面的数据是空。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>fireKeyEvent</title> </head> <body onkeydown="return cellkeydown(event)" id="mytest">
<!--这里设置textarea不能为display为none 否则就粘贴不了信息-->
<textarea id="textArea" style="width:0px;height:0px; overflow:hidden;margin:0px;padding:0px;"></textarea>
<input type="button" id="btn1" value="fire" /><!--按钮在这模拟ctrl+v事件--> <script type="text/javascript">
/*
*@desc keypress事件
*/
function cellkeydown(event) {
if ((event.ctrlKey && event.keyCode == 86) ) { //如果用户按的是ctrl+v
var ss = document.getElementById("textArea");
ss.focus();
ss.select();
// 等50毫秒,keyPress事件发生了再去处理数据
setTimeout("dealwithData()", 50);
}
}
/*
*@desc 处理数据
*/
function dealwithData(event) {
var ss = document.getElementById("textArea");
alert(ss.value);//这里获得的是剪贴板里面的信息
ss.blur();
} function $(id) {
return document.getElementById(id);
}
function addEvent(el, type, fn) { if (document.addEventListener) {
el.addEventListener(type, fn, true);
} else if (document.attachEvent) {
el.attachEvent("on" + type, fn);
} else {
el["on" + type] = fn;
}
} /*
*@desc 触发事件
*/
function fireKeyEvent(el, evtType, keyCode) {
var evtObj;
if (document.createEvent) {
if (window.KeyEvent) {//firefox 浏览器下模拟事件
evtObj = document.createEvent('KeyEvents');
evtObj.initKeyEvent(evtType, true, true, window, true, false, false, false, keyCode, 0);
} else {//chrome 浏览器下模拟事件
evtObj = document.createEvent('UIEvents');
evtObj.initUIEvent(evtType, true, true, window, 1); delete evtObj.keyCode;
if (typeof evtObj.keyCode === "undefined") {//为了模拟keycode
Object.defineProperty(evtObj, "keyCode", { value: keyCode });
} else {
evtObj.key = String.fromCharCode(keyCode);
} if (typeof evtObj.ctrlKey === 'undefined') {//为了模拟ctrl键
Object.defineProperty(evtObj, "ctrlKey", { value: true });
} else {
evtObj.ctrlKey = true;
}
} el.dispatchEvent(evtObj); } else if (document.createEventObject) {//IE 浏览器下模拟事件
evtObj = document.createEventObject();
evtObj.keyCode = keyCode
el.fireEvent('on' + evtType, evtObj);
}
}
/*
*@desc 绑定按键触发ctrl+v事件
*/
addEvent($("btn1"), "click", function () {
fireKeyEvent($("mytest"), "keydown", 86);
}); </script> </body>
</html>
最后的问题
搞了一下午,捣鼓出来怎样用js模拟事件触发,却发现即使触发了事件,可是却不能如按ctrl+v一样获得剪贴板里面的数据了。
这究竟是怎么一回事,不知道有哪位大神可以告诉我原因!
非常感谢哦!
由chrome剪贴板问题研究到了js模拟鼠标键盘事件的更多相关文章
- js中鼠标滚轮事件详解
js中鼠标滚轮事件详解 (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...
- js模拟点击事件实现代码
js模拟点击事件实现代码 类型:转载 时间:2012-11-06 在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的"提交"按钮来提交表单 ...
- js中获取键盘事件【转】
<script type="text/javascript" language=JavaScript charset="UTF-8"> 2 docu ...
- js中获取键盘事件
<script type="text/javascript" language=JavaScript charset="UTF-8"> docume ...
- js 里面的键盘事件对应的键码
js 里面的键盘事件经常用到,所以收集了键盘事件对应的键码来分享下:keyCode 8 = BackSpace BackSpacekeyCode 9 = Tab TabkeyCode 12 = Cle ...
- 网页里如何使用js屏蔽鼠标右击事件
图片.png 在后台管理系统里面,遇到了这样的一个问题,右击ztree菜单,弹出修改界面,但是,现在确实这样的,右击默认弹出功能提示的框框,看上去似乎很影响自己想要的功能,只能禁用了,那么,网页里如何 ...
- JS实现鼠标滚动事件,兼容IE9,FF,Chrome.
<!-- 废话不多说,直接贴代码 --><script type="text/javascript" src="jquery.min.js"& ...
- 使用JS实现鼠标滚轮事件
网站需要实现鼠标滚轮滚一下,页面向下滑向下一个锚点,由于前面有个一样式必须用jQuery1.3.2,而好多滚轮事件都使用了更高版本的jQuery,于是就从网上找了找 <script type=& ...
- 手机端js模拟长按事件(代码仿照jQuery)
代码编写: $.fn.longPress = function(fn) { var timeout = undefined; var $this = this; for(var i = 0;i< ...
随机推荐
- TDD(测试驱动开发)培训录(转)
本文转载自:http://www.cnblogs.com/whitewolf/p/4205761.html 最近也在了解TDD,发现这篇文章不错,特此转载一下. TDD(测试驱动开发)培训录 2015 ...
- CSS 实现加载动画之五-光盘旋转
今天做的这个动画叫光盘旋转,名字自己取的.动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画.做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分离出来.这个动画的实现也很简单,关键 ...
- [CareerCup] 12.2 Find the Reason of Crash 找到程序崩溃的原因
12.2 You are given the source to an application which crashes when it is run. After running it ten t ...
- 解决VC几个编译问题的方法——好用
一.vc网络编程中遇到一个编译问题,原来是少了WSOCK32.LIB. 在 project-->settings-->Link-->Object/Library modules 中加 ...
- Linux下OpenSSL的安装与使用
Linux下OpenSSL的安装与使用 OpenSSL简介 OpenSSL是一个SSL协议的开源实现,采用C语言作为开发语言,具备了跨平台的能力,支持Unix/Linux.Windows.Mac OS ...
- 20145208《Java程序设计》第2周学习总结
2015208 <Java程序设计>第2周学习总结 教材学习内容总结 本章内容主要讲了类型.变量与运算符的一些知识,也讲了一些基本的流程语法. 类型 基本类型 整数:short整数(占2字 ...
- Asp.Net MVC 合并js或css请求
Step1:BundleConfig中注册 bundles.Add(new ScriptBundle("~/isValid").Include( "~/Scripts/ ...
- Gt9xx芯片,在规格书+Linux驱动的基础上,移植为USB裸机经验。直接用开发板,不去碰硬件的坑。
1,用内核代码和规格书来印证数据格式: //命令3字节,IC地址 u8 end_cmd[] = {GTP_READ_COOR_ADDR >> , GTP_READ_COOR_ADDR &a ...
- IDEA SSH
被IDEA各种虐0.0各种配置,没有人教就百度,别人也弄了点,然后整整花了一天,从eclipse转到IDEA真的不容易啊TT
- 分页pagination实现及其应用
1.分页jquery.page.js //分页插件 /** 2014-08-05 ch **/ (function ($) { var ms = { init: function (obj, args ...