javascript模拟键盘按键事件，支持最新DOM3标准（Chrome亲测）。

华宇智能

已于 2023-02-17 15:15:45 修改

阅读量1.8w

点赞数 4

分类专栏：前端开发文章标签： javascript chrome firefox

于 2020-09-22 12:15:48 首次发布

本文链接：https://blog.csdn.net/xuefu2008/article/details/108727693

版权

前端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

需求

打算在页面中自动填写账号密码，直接给文本框input元素赋值的方式无法触发键盘事件，导致数据不能提交（特殊的场景）。

所以改用javascript的模拟按键事件，但是UIEvent.initUIEvent和KeyboardEvent.initKeyEvent()等方法在最新的Chrome浏览器中已废弃。

按最新标准改用KeyboardEvent构造函数。

一、已废弃方法

最新规范（www.w3.org/TR/DOM-Level-3-Events/）中已弃用KeyboardEvent.initKeyEvent()方法。因此，Chrome没不支持此类方法。

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

二、推荐方法

<html>
<head>365codes.com</head>
<body>
    <input id="input_username"></input>
</body>
    <script type="text/javascript">
	function fireKeyEvent(element, evtType, keyChar) {
		element.focus();
		var KeyboardEventInit = {key:keyChar, code:"", location:0, repeat:false, isComposing:false};
		var evtObj = new KeyboardEvent(evtType, KeyboardEventInit);
		element.dispatchEvent(evtObj);
	}
	
	var objInput = document.getElementById("input_username");
    objInput.addEventListener('keydown', function (e) {
        objInput.value += e.key;
    }, false);
	
	fireKeyEvent(objInput,"keydown","a");
    </script>
</html>