相关文章推荐
飘逸的萝卜  ·  RDS MySQL助力MySQL ...·  1 年前    · 
安静的毛豆  ·  react ...·  2 年前    · 
热情的硬币  ·  不得不读 | ...·  3 年前    · 

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

二、推荐方法

<head>365codes.com</head> <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>

参考标准文档: 键盘事件 KeyboardEvent() - Web API 接口参考 | MDN

特别提醒:代码触发按键事件不会导致该字母自动出现在文本框中,所以在监听keydown事件中增加了input元素赋值,为了UI显示而已。各家浏览器出于安全原因设定,来防止脚本模拟与浏览器本身交互的操作。

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言 一、pandas是什么? 二、使用步骤 1.引入库 2.读入数据 总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、pandas是什么?示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数.. *dqKeys v1.0.0 | (c) 2016 www.findme.wang *@params js on keys 监听的 按键 *@params bool isOrder 按键 是否有相应的顺序 *@params Function sucFuc 完成 按键 的回调函数 *@params Function 1. IE下没什么问题,创建 事件 对象、对对象的keyCode属性赋值,然后再抛出来就行了: evtObj = document.createEventObject(); evtObj.keyCode=keyCode el.fireEve
是的,原生 JS 可以 模拟 键盘 输入。可以使用 JavaScript 中的 事件 来 模拟 按键 事件 ,例如keydown、keyup和keypress 事件 。通过使用这些 事件 ,可以触发指定键的按下和抬起操作,从而 模拟 用户的 键盘 输入。此外,还可以使用 JavaScript 创建一个新的KeyboardEvent对象来 模拟 按键 事件 ,并指定按下的键、 事件 类型和其他相关属性。 const ke = new KeyboardEvent('keydown', { bubbles: true, cancelable: true, keyCode: 13 document.body.dispatchEvent(ke); 键盘 键值对照表 上面的 keyCode 对应 十进制值 $ yarn add [--dev] keysim # Install by copying the dist file. $ curl -o path/to/vendor/keysim. js https://unpkg.com/keysim@latest/dist/keysim. js 有两种用于 模拟 DOM 元素上的击键的高级方法,一种用于在元素中键入输入,另一种用于键入非输入“动作”键。 请注意,keysim提供的任何方法都不会触发浏览器的默认行为,例如插入文本或移动光标。 它仅允许您通过发送正确的 DOM 事件 来测试 事件
DOM 中的 事件 模拟 可以在 document 对象上使用 createEvent() 方法创建 event 对象。这个方法接收一个参数,即表示要创建的 事件 类型的字符串。在 DOM 2 级中,所有这些字符串都使用英文复数形式,而在 DOM 3级中都变成了单数。这个字符串可以使下列几个字符串之一. UIEvents :一般化的 UI 事件 。鼠标 事件 和 键盘事件 都继承自 UI 事件 。 DOM 3 级中是 UI
JS 进阶: 深入理解 键盘事件 Keyboard Event 文章目录 JS 进阶: 深入理解 键盘事件 Keyboard Event正文1. 基础 API2. 基础 事件 :keydown、keyup3. 应用:一次按下 + 释放仅触发一次 事件 4. 应用:组合键 事件 监听封装5. 应用:计算按压时间6. 应用:定制定时器超越 事件 触发间隔限制其他资源参考连接完整代码示例 1. 基础 API 第一部分是基础 API var divElement = document.getElementById("yourDivId"); divElement.addEventListener("keydown", function(event) { // 处理 按键 事件 在上述代码中,将"yourDivId"替换为你想要添加 事件 的div元素的ID。然后,使用addEventListener()方法将keydown 事件 绑定到该元素上。在回调函数中,你可以编写处理 按键 事件 的代码。