如何使用JavaScript模拟键盘操作

在JavaScript中，你可以使用KeyboardEvent来模拟键盘操作。以下是一些示例，展示如何模拟键盘事件：

  1. 模拟键盘按键按下：
    使用keydown事件来模拟按键按下。
function simulateKeyDown(keyCode) {
  var event = new KeyboardEvent('keydown', {
    bubbles: true,
    cancelable: true,
    keyCode: keyCode
  });
  document.dispatchEvent(event);
}

simulateKeyDown(65); // 模拟按下 'A' 键
  1. 模拟键盘按键释放：
    使用keyup事件来模拟按键释放。
function simulateKeyUp(keyCode) {
  var event = new KeyboardEvent('keyup', {
    bubbles: true,
    cancelable: true,
    keyCode: keyCode
  });
  document.dispatchEvent(event);
}

simulateKeyUp(65); // 模拟释放 'A' 键
  1. 模拟键盘按键输入：
    使用keypress或input事件来模拟按键输入。
function simulateKeyPress(char) {
  var event = new KeyboardEvent('keypress', {
    bubbles: true,
    cancelable: true,
    key: char
  });
  document.dispatchEvent(event);
}

simulateKeyPress('a'); // 模拟按下 'a' 键
  1. 模拟组合键操作：
    你可以在事件对象中设置ctrlKey、altKey、shiftKey和metaKey属性来模拟组合键。
function simulateCtrlA() {
  var event = new KeyboardEvent('keydown', {
    bubbles: true,
    cancelable: true,
    keyCode: 65, // 'A' 键的 keyCode
    ctrlKey: true
  });
  document.dispatchEvent(event);
  document.dispatchEvent(new KeyboardEvent('keyup', { keyCode: 65, ctrlKey: false }));
}

simulateCtrlA(); // 模拟按下 Ctrl+A
  1. 模拟文本输入：
    使用input事件来模拟文本输入。
function simulateTextInput(text) {
  var inputEvent = new Event('input', { bubbles: true });
  var textArea = document.createElement('textarea');
  textArea.value = text;
  textArea.dispatchEvent(inputEvent);
}

simulateTextInput('Hello, world!'); // 模拟输入文本
  1. 模拟按键组合输入：
    你可以组合使用keydown、keypress和keyup事件来模拟完整的按键输入。
function simulateKeyCombination(key, modifier) {
  var keyDownEvent = new KeyboardEvent('keydown', {
    bubbles: true,
    cancelable: true,
    keyCode: key,
    [modifier + 'Key']: true
  });
  var keyPressEvent = new KeyboardEvent('keypress', {
    bubbles: true,
    cancelable: true,
    key: String.fromCharCode(key),
    [modifier + 'Key']: true
  });
  var keyUpEvent = new KeyboardEvent('keyup', {
    bubbles: true,
    cancelable: true,
    keyCode: key,
    [modifier + 'Key']: false
  });

  document.dispatchEvent(keyDownEvent);
  document.dispatchEvent(keyPressEvent);
  document.dispatchEvent(keyUpEvent);
}

simulateKeyCombination(65, 'ctrl'); // 模拟 Ctrl+A

请注意，模拟键盘操作可能受到浏览器安全策略的限制，某些操作可能无法在所有浏览器中工作。此外，模拟键盘操作可能在某些情况下不被允许，特别是在自动化测试或与某些网站交互时。

 

2025-04-22 15:10:37【出处】：https://blog.csdn.net/qq_42214739/article/details/141864301

=======================================================================================

js模拟键盘输入

示例代码

const ke = new KeyboardEvent('keydown', {
    bubbles: true, cancelable: true, keyCode: 13
});
document.body.dispatchEvent(ke);

 

键盘键值对照表

上面的 keyCode 对应 十进制值

常数名称十六进制值十进制值对应按键
VK_LBUTTON 01 1 鼠标的左键
VK_RBUTTON 02 2 鼠标的右键
VK-CANCEL 03 3 Ctrl+Break(通常不需要处理)
VK_MBUTTON 04 4 鼠标的中键(三按键鼠标)
VK_BACK 08 8 Backspace键
VK_TAB 09 9 Tab键
VK_CLEAR 0C 12 Clear键(Num Lock关闭时的数字键盘5)
VK_RETURN 0D 13 Enter键
VK_SHIFT 10 16 Shift键
VK_CONTROL 11 17 Ctrl键
VK_MENU 12 18 Alt键
VK_PAUSE 13 19 Pause键
VK_CAPITAL 14 20 Caps Lock键
VK_ESCAPE 1B 27 Ese键
VK_SPACE 20 32 Spacebar键
VK_PRIOR 21 33 Page Up键
VK_NEXT 22 34 Page Domw键
VK_END 23 35 End键
VK_HOME 24 36 Home键
VK_LEFT 25 37 LEFT ARROW 键(←)
VK_UP 26 38 UP ARROW键(↑)
VK_RIGHT 27 39 RIGHT ARROW键(→)
VK_DOWN 28 40 DOWN ARROW键(↓)
VK_Select 29 41 Select键
VK_PRINT 2A 42 Print键
VK_EXECUTE 2B 43 EXECUTE键
VK_SNAPSHOT 2C 44 Print Screen键(抓屏)
VK_Insert 2D 45 Ins键(Num Lock关闭时的数字键盘0)
VK_Delete 2E 46 Del键(Num Lock关闭时的数字键盘.)
VK_HELP 2F 47 Help键
VK_0 30 48 0键
VK_1 31 49 1键
VK_2 32 50 2键
VK_3 33 51 3键
VK_4 34 52 4键
VK_5 35 53 5键
VK_6 36 54 6键
VK_7 37 55 7键
VK_8 38 56 8键
VK_9 39 57 9键
VK_A 41 65 A键
VK_B 42 66 B键
VK_C 43 67 C键
VK_D 44 68 D键
VK_E 45 69 E键
VK_F 46 70 F键
VK_G 47 71 G键
VK_H 48 72 H键
VK_I 49 73 I键
VK_J 4A 74 J键
VK_K 4B 75 K键
VK_L 4C 76 L键
VK_M 4D 77 M键
VK_N 4E 78 N键
VK_O 4F 79 O键
VK_P 50 80 P键
VK_Q 51 81 Q键
VK_R 52 82 R键
VK_S 53 83 S键
VK_T 54 84 T键
VK_U 55 85 U键
VK_V 56 86 V键
VK_W 57 87 W键
VK_X 58 88 X键
VK_Y 59 89 Y键
VK_Z 5A 90 Z键
VK_NUMPAD0 60 96 数字键0键
VK_NUMPAD1 61 97 数字键1键
VK_NUMPAD2 62 98 数字键2键
VK_NUMPAD3 62 99 数字键3键
VK_NUMPAD4 64 100 数字键4键
VK_NUMPAD5 65 101 数字键5键
VK_NUMPAD6 66 102 数字键6键
VK_NUMPAD7 67 103 数字键7键
VK_NUMPAD8 68 104 数字键8键
VK_NUMPAD9 69 105 数字键9键
VK_MULTIPLY 6A 106 数字键盘上的*键
VK_ADD 6B 107 数字键盘上的+键
VK_SEPARATOR 6C 108 Separator键
VK_SUBTRACT 6D 109 数字键盘上的-键
VK_DECIMAL 6E 110 数字键盘上的.键
VK_DIVIDE 6F 111 数字键盘上的/键
VK_F1 70 112 F1键
VK_F2 71 113 F2键
VK_F3 72 114 F3键
VK_F4 73 115 F4键
VK_F5 74 116 F5键
VK_F6 75 117 F6键
VK_F7 76 118 F7键
VK_F8 77 119 F8键
VK_F9 78 120 F9键
VK_F10 79 121 F10键
VK_F11 7A 122 F11键
VK_F12 7B 123 F12键
VK_NUMLOCK 90 144 Num Lock 键
VK_SCROLL 91 145 Scroll Lock键
上面没有提到的：(都在大键盘)      
VK_LWIN   91 左win键
VK_RWIN   92 右win键
VK_APPS   93 右Ctrl左边键，点击相当于点击鼠标右键，会弹出快捷菜单
186 ;(分号)    
187 =键    
188 ,键(逗号)    
189 -键(减号)    
190 .键(句号)    
191 /键    
192 `键(Esc下面)    
219 [键    
220 \键    
221 ]键    
222 ‘键(引号)    

 

2025-04-22 15:17:15【出处】：https://blog.csdn.net/geekswg/article/details/120246209

=======================================================================================

javascript模拟键盘按键事件，支持最新DOM3标准

需求

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

 

总结

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

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

 

2025-04-23 11:46:40【出处】：https://huayu.blog.csdn.net/article/details/108727693

=======================================================================================

posted on 2025-04-22 15:12  jack_Meng  阅读(1182)  评论(0)    收藏  举报

导航