添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
踏实的馒头  ·  New Brilliant Blue G ...·  1 年前    · 
儒雅的菠萝  ·  Python Opencv ...·  1 年前    · 
暗恋学妹的双杠  ·  stackexchange.redis - ...·  1 年前    · 

最近代码中有个功能需要用到手动触发键盘事件的功能。但键盘事件的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
				
实际应用中,我们会遇到监听按键输入和鼠标点击事件,在这里我们进行对鼠标键盘事件的总结. Keyboard​Event 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 等。