logo标签列表

在JavaScript中模拟按下Enter键

javascripthtmldom-eventskeyboard-eventsenter
13

我尝试在特定的 TextArea 中使用 JavaScript 模拟 Enter 键。

这是我的代码：

 function enter1() {
       var keyboardEvent = document.createEvent('KeyboardEvent'); 
       var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? 'initKeyboardEvent' : 'initKeyEvent'; 
       keyboardEvent[initMethod]('keydown', // event type : keydown, keyup, keypress
            true, // bubbles
            true, // cancelable
            window, // viewArg: should be window
            false, // ctrlKeyArg
            false, // altKeyArg
            false, // shiftKeyArg
            false, // metaKeyArg
            13, // keyCodeArg : unsigned long the virtual key code, else 0
            13 // charCodeArgs : unsigned long the Unicode character associated with the depressed key, else 0
       );
       document.getElementById('text').dispatchEvent(keyboardEvent);
 }

文本区域:

<textarea id="text"> </textarea>
当我调用enter1()时，TextArea没有任何反应。为什么会这样？
请点击此处阅读有关在JavaScript中触发键盘事件的内容，点击此处阅读有关在Chrome模拟按键事件但是出现按下不正常的问题的内容。 - alessandrio
@avrilalejandro 感谢你的支持，但是每个函数都出现了“输入”错误。我不明白。 - Luca Laiton
OP可能永远不会回来，但是对于未来遇到同样问题的读者，你在面临一个XY问题。不，你不想触发Enter事件。你想要的是产生与Event一般产生的相同动作。在这里很难确切地知道它是什么，但也许他们想插入一个新行？那就插入一个新行。也许他们有一个事件监听器会触发第三个动作？那么直接调用第三方动作即可。 - Kaiido
3个回答
15

对于任何遇到事件派发问题的人，尝试添加键值对bubbles: true：

const keyboardEvent = new KeyboardEvent('keydown', {
    code: 'Enter',
    key: 'Enter',
    charCode: 13,
    keyCode: 13,
    view: window,
    bubbles: true
});
2
我认为这是一个浏览器的 bug，因为 keyboardEvent.which 是不可写的。为了解决这个问题，在分配按键代码之前，您必须删除 keyboardEvent.which 属性。
 function enter1() {
   var keyboardEvent = document.createEvent('KeyboardEvent');
   delete keyboardEvent.which;
   var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? 'initKeyboardEvent' : 'initKeyEvent';
   keyboardEvent[initMethod](
     'keydown', // event type : keydown, keyup, keypress
     true, // bubbles
     true, // cancelable
     window, // viewArg: should be window
     false, // ctrlKeyArg
     false, // altKeyArg
     false, // shiftKeyArg
     false, // metaKeyArg
     13, // keyCodeArg : unsigned long the virtual key code, else 0
     13 // charCodeArgs : unsigned long the Unicode character associated with the depressed key, else 0
   );
   document.getElementById('text').dispatchEvent(keyboardEvent);
 }

另一种解决方案是KeyboardEvent构造函数。但要注意兼容性问题。
 function enter1() {
   var keyboardEvent = new KeyboardEvent('keydown');
   delete keyboardEvent.which;
   keyboardEvent.which = 13;
   document.getElementById('text').dispatchEvent(keyboardEvent);
 }
我修改了代码，但是没有任何变化。 谢谢你的回答。 - Luca Laiton
@LucaLaiton 你可以尝试手动分配 keyboardEvent.which = 13; 而不是将按键码传递到 initMethod。 - Lewis
函数premi_enter() { var keyboardEvent = document.createEvent('KeyboardEvent'); delete keyboardEvent.which; keyboardEvent.which = 13; document.getElementById('text').dispatchEvent(keyboardEvent); } - Luca Laiton
@LucaLaiton 是的。顺便说一下，我已经用一种更优雅的解决方案更新了我的答案。我想你可能会对它感兴趣。 - Lewis
感谢您的支持，但是最后一个函数由于兼容性问题无法工作，也许。 对我来说，只需要模拟按下回车键就很困难了 :) - Luca Laiton
我有同样的问题，但我仍然无法让它工作。 - Reem
2

var textArea = document.getElementById('text');
function enter() {
    var keyboardEvent = new KeyboardEvent('keydown', {
        code: 'Enter',
        key: 'Enter',
        charCode: 13,
        keyCode: 13,
        view: window
    });

    textArea.dispatchEvent(keyboardEvent);
}

textArea.addEventListener('keydown', function (e) {
    console.log(e);
});
enter()
<!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>test</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>

<body>
    <textarea id="text"></textarea>
</body>

</html>

目前，initKeyboardEvent方法已被标记为过时。建议直接实例化KeyboardEvent并将必要的数据传递给构造函数 - link。请参阅浏览器兼容性部分。至少在Chrome和Firefox中可以正常工作。

这种方法现在看起来已经过时了。 - SFin
@SFin 我移除了 charKode 和 keyCode 属性，这个解决方案对我有效。 - C.M.
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接