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

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于N

华宇智能

19834人浏览 · 2020-09-22 12:15:48

华宇智能 · 2020-09-22 12:15:48 发布

需求

打算在页面中自动填写账号密码，直接给文本框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>