最近代码中有个功能需要用到手动触发键盘事件的功能。但键盘事件的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);
原文链接:最近代码中有个功能需要用到手动触发键盘事件的功能。但键盘事件的fire在各浏览器下实现不一样,下面分别说明:1. IE下没什么问题,创建事件对象、对对象的keyCode属性赋值,然后再抛出来就行了:evtObj = document.createEventObject();evtObj.keyCode=keyCodeel.fireEve
实际应用中,我们会遇到监听按键输入和鼠标点击事件,在这里我们进行对鼠标和键盘事件的总结.
KeyboardEvent
KeyboardEvent 对象描述了键盘的交互方式。 每个事件都描述了一个按键(Each event describes a key);事件类型keydown, keypress 与 keyup 可以确定是哪种事件在活动。
KeyboardEvent 表示刚刚发生在按键上的事情。 当你需要处理文本输入的时候,使用 HTML5 input 事件代替。例如,用户使用手持系统如平板电脑输入时, 按键事件可能不会触发。
本接口同样会继承对象父代的方法, UIEvent 和 E
HTMLElement.prototype.pressKey = function(e) {
var doc = document.createEvent("UIEvents");
doc.keyCode = e;
doc.initEvent("keydown", true, true);
this.dispatchEvent(doc);
例:自动触发按回车键
document.body.pressKey(13);
keypress:按下有值的键时触发,即按下 Ctrl、Alt、Shift、Meta 这样无值的键,这个事件不会触发。对于有值的键,按下时先触发keydown事件,再触发这个事件。
keyup:松开键盘时触发该事件。
如果用户一直按键不松开,就会连续触发键盘事件,触发的顺
在form中, submit的快捷键是 enter,reset的快捷键是 esc。不过在IE6,safari4,ff3.5,opera10,chrome中,按Enter,不但激发form的submit事件,同时也会激发提交按钮的onclick,激发顺序为提交按钮的 onclick → form 的 onsubmit。
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]不过并不止提交按钮会激发form的submit事件,连同上面的归纳如下: 1. 如果表单里有一个type=”submit”的按钮,回车键生效。 2. 如果表单里只有一个type=”te
[b]场景:[/b]
最近用一个插件来展示大量图片,该插件封装逻辑很复杂,文档几乎为零。要修改其代码几乎是不可能完成的任务。因此我想要手工触发一个鼠标点击事件,以此激活其内部处理代码,完成相应的操作,不修改插件的任何代码、不用阅读任何插件的代码。
简单地触发鼠标事件很容易...
在 Node.js 中模拟鼠标和键盘操作,可以使用 `robotjs` 模块。`robotjs` 是一个 Node.js 的桌面自动化库,支持模拟键盘、鼠标、屏幕截图等操作。
以下是一个示例代码,演示如何使用 `robotjs` 模块模拟鼠标和键盘操作:
```javascript
const robot = require('robotjs');
// 模拟鼠标点击
robot.moveMouseSmooth(100, 100); // 移动鼠标到 (100, 100)
robot.mouseClick(); // 单击鼠标左键
// 模拟键盘输入
robot.typeString('Hello, world!'); // 输入文本
robot.keyTap('enter'); // 模拟按下 Enter 键
在上面的代码中,我们使用 `robotjs` 模块的 `moveMouseSmooth` 方法移动鼠标到指定位置,并使用 `mouseClick` 方法模拟单击鼠标左键。然后,我们使用 `typeString` 方法输入文本,使用 `keyTap` 方法模拟按下 Enter 键。
需要注意的是,`robotjs` 模块只能在 Windows、macOS 和 Linux 等桌面操作系统中使用,并且需要安装 C++ 编译器和 Python 等工具才能正常运行。如果需要在 Web 应用中模拟鼠标和键盘操作,可以考虑使用前端 UI 自动化工具,比如 Puppeteer、Selenium 等。