JavaScript 模拟键盘事件
原文链接:http://blog.csdn.net/lovelyelfpop/article/details/52471878
最近代码中有个功能需要用到手动触发键盘事件的功能。但键盘事件的fire在各浏览器下实现不一样,下面分别说明:
1. IE下没什么问题,创建事件对象、对对象的keyCode属性赋值,然后再抛出来就行了:
evtObj = document.createEventObject();
evtObj.keyCode=keyCode
el.fireEvent('on'+evtType, evtObj);
2. Firefox 需要通过document.createEvent创建KeyEvents对象,再通过initKeyEvent方法对事件对象初始化
evtObj = document.createEvent('KeyEvents');
evtObj.initKeyEvent( evtType, true, true, window, false, false, false, false, keyCode, 0 );
initKeyEvent 参考:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/initKeyEvent
3. Chrome/Safari/Opera
通过document.createEvent创建UIEvents对象,初始化后再在该对象上挂载按键值。
evtObj = document.createEvent('UIEvents');
evtObj.initUIEvent( evtType, true, true, window, 1 );
initUIEvent 参考:https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/initUIEvent
Chrome和Opera可以先将keyCode属性delete掉后,再用Object.defineProperty方法重新为它赋值:
delete evtObj.keyCode;
Object.defineProperty(evtObj,"keyCode",{value:keyCode});
有些安卓浏览器,此法无效,需要用下面的方式:
Object.defineProperty(evtObj, 'keyCode', {
get : function() { return this.keyCodeVal; }
});
Object.defineProperty(evtObj, 'which', {
get : function() { return this.keyCodeVal; }
});
evtObj.keyCodeVal = keyCode;
最后,封装好的function大概就是这样:
function fireKeyEvent(el, evtType, keyCode){
var doc = el.ownerDocument,
win = doc.defaultView || doc.parentWindow,
evtObj;
if(doc.createEvent){
if(win.KeyEvent) {
evtObj = doc.createEvent('KeyEvents');
evtObj.initKeyEvent( evtType, true, true, win, false, false, false, false, keyCode, 0 );
}
else {
evtObj = doc.createEvent('UIEvents');
Object.defineProperty(evtObj, 'keyCode', {
get : function() { return this.keyCodeVal; }
});
Object.defineProperty(evtObj, 'which', {
get : function() { return this.keyCodeVal; }
});
evtObj.initUIEvent( evtType, true, true, win, 1 );
evtObj.keyCodeVal = keyCode;
if (evtObj.keyCode !== keyCode) {
console.log("keyCode " + evtObj.keyCode + " 和 (" + evtObj.which + ") 不匹配");
}
}
el.dispatchEvent(evtObj);
}
else if(doc.createEventObject){
evtObj = doc.createEventObject();
evtObj.keyCode = keyCode;
el.fireEvent('on' + evtType, evtObj);
}
}
使用方法: 假设模拟回车
fireKeyEvent(input元素, 'keydown', 13);
JavaScript 模拟键盘事件的更多相关文章
- JavaScript 模拟键盘事件和鼠标事件(比如模拟按下回车等)
http://blog.csdn.net/lovelyelfpop/article/details/52471878# 封装好的function大概就是这样: function fireKeyEven ...
- JS模拟键盘事件 -- 原理及小例子
提问: 键盘默认事件,比如tab切换,alt+f4关闭,ctrl+t新建等,如果不想通过键盘而是一些按钮点击来触发这些功能,该咋办呢? 例子: 先以tab为例上一个小例子: <!DOCTYPE ...
- 初识 jquery.simulate.js 模拟键盘事件
用jquery 和 jquery.simulate.js 实现模拟键盘事件,点击上下左右div相当于点击键盘的上下左右键 <!DOCTYPE html> <html> < ...
- javascript的键盘事件大全
javascript的键盘事件大全 ------------------------------------------------------------------- 使用event对象的keyC ...
- selenium 模拟键盘事件 复制粘贴、右键、回车等
#coding=utf-8 ''' selenium ''' from selenium import webdriver as wd import time bc=wd.Chrome(executa ...
- 使用jquery模拟键盘事件,但window系统并不会真的响应事件,只是浏览器当前页面会响应而已
<!DOCTYPE html> <html> <head> <title>Demo</title> <meta http-equiv= ...
- JavaScript获取键盘事件
JavaScript中: onkeydown 事件会在用户按下一个键盘按键时发生. onkeypress 事件会在键盘按键被按下并释放一个键时发生. onkeyup 事件会在键盘按键被松开时发生. 支 ...
- C#模拟键盘事件
public partial class Form1 : Form { public Form1() { InitializeComponent(); } [DllImport("USER3 ...
- javascript之键盘事件
键盘事件包含onkeydown.onkeypress和onkeyup这三个事件 事件初始化 function keyDown(){} document.onkeydown = keyDown; ...
随机推荐
- python的re模块常用方法
正则表达式模式 模式字符串使用特殊的语法来表示一个正则表达式: 字母和数字表示他们自身.一个正则表达式模式中的字母和数字匹配同样的字符串. 多数字母和数字前加一个反斜杠时会拥有不同的含义. 标点符号只 ...
- python 配置opencv-python 接口
anaconda2下配置opencv-python 接口,import cv2遇到no cv2 模块问题,解决办法是将cv2.so放到anaconda2/lib/python2.7/site-pack ...
- 【转】Python3学习笔记(urllib模块的使用)
原文地址:https://www.cnblogs.com/Lands-ljk/p/5447127.html 1.基本方法 urllib.request.urlopen(url, data=None, ...
- nginx进程属主问题讨论
文章作者:luxianghao 文章来源:http://www.cnblogs.com/luxianghao/p/6107096.html 转载请注明,谢谢合作. 免责声明:文章内容仅代表个人观点,如 ...
- 最小的图灵完备语言——BrainFuck
最小的图灵完备语言--BrainFuck 图灵完备性(Turing completness) 在可计算性理论(computability theory)中,图灵等价指的是:对于两个计算机A和B,如果A ...
- 使用Eclipse+axis2一步一步发布webservice
1.下载axis2相关软件http://axis.apache.org/axis2/java/core/download.html 2.Java环境配置:JAVA_HOME.JRE_HONE.PATH ...
- HTML 文档之 Head 最佳实践--摘抄
HTML 文档之 Head 最佳实践 story 01-10 阅读 353 收藏 0 收藏 这篇文章整理了作者认可的一些最佳实践,写在这里与各位分享 阅读原文折叠收起 HTML 文档之 Head 最佳 ...
- Laravel 视图中的url
<a href="{{ url('url') }}">url</a> <a href="{{ action('StudentControll ...
- hdu1569 方格取数 求最大点权独立集
题意:一个方格n*m,取出一些点,要求两两不相邻,求最大和.思路:建图,相邻的点有一条边,则建立了一个二分图,求最大点权独立集(所取点两两无公共边,权值和最大),问题转化为求总权和-最小点权覆盖集(点 ...
- web开发规范文档
Web前端开发规范文档 规范目的: 使开发流程更加规范化. 通用规范: TAB键用两个空格代替(windos下tab键占四个空格,linux下TAB键占八个空格). CSS样式属性或者JAVASCR ...