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);

  • 7
    点赞
  • 29
    收藏
  • 打赏
    打赏
  • 17
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

神秘_博士

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值