Question

我正在尝试并且必须用JavaScript keypress来字母'A'。在下面的代码中，有一个alert('hello')框，指示代码正在执行。

但是此代码并未为“登录电子邮件”输入（这是一个文本框）设置任何值。

代码有什么问题？

          function presskey()
          { 
              var e = document.createEvent('KeyboardEvent');
              if (e.initKeyboardEvent)
              {
                  alert('hello'); e.initKeyboardEvent('keypress', true, true, document.defaultView, 'A', 0, '', false, '');
              }
              document.getElementById('login-email').dispatchEvent(e);
          }

Answer 1

首先，我想指出.initKeyboardEvent() is deprecated。您可能想要的是事件构造函数（例如，“ input”事件的new InputEvent()，如下面的代码所示）

也就是说，我的其余答案都假定问题实际上应该是“如何手动触发文本框上的输入事件？”。请让我知道这是否不是您真正想要的，但相同的概念也应适用于其他类型的事件。

...如果这是您的实际问题，我可以向您介绍如何开始解决此问题：

const typeInto = (el, data) => {
  // Note the use of the InputEvent constructor
  const e = new InputEvent('input', {
    inputType: 'insertText',
    data,
  })
  
  // Manually add the text to element.value
  el.value += data
  
  // Fire the event like you were doing
  el.dispatchEvent(e)
}

// Get element
const el = document.querySelector('.js-login-email')

// Add an event listener for the 'input' event, to prove it's working
el.addEventListener('input', e => {
  console.log(`${e.inputType}: ${e.data}`)
})

// Example "typeInto" usage: call for each letter in the string below
'example@example.com'.split('').forEach(letter => {
  typeInto(el, letter)
})

<input type="email" class="js-login-email"/>

Answer 2

您尝试添加事件监听器的MB吗？

elem.AddEventListener("keypress", (e) => {

    var e = document.createEvent('KeyboardEvent');

    if(e.keyCode === 65) {
        //...
    }

    document.getElementById('login-email').dispatchEvent(e);

});

Answer 3

您可以通过发起keydown事件来实现此目标，然后获取您的按钮密钥代码

像这样

window.addEventListener("keydown", function (event) {
  console.log(event.keyCode)
});

因此在您的代码中将是这样


window.addEventListener("keydown", function (event) {

  if(event.keyCode === 65){
     console.log('hello, world');
  }
}, true);

如果您不知道需要使用哪个键码，请选中此website，它将为您提供每个键的代码

或者如果您想通过键名进行操作，可以这样

window.addEventListener("keydown", function (event) {

  console.log(event.key)
});

注意：每个按钮的键码来自于ASCII码如果您不知道这是什么，可以检查此link

Answer 4

我现在尝试合并代码，但不确定是否正确。

请注意，我想通过运行presskey（）函数以编程方式将字母“ A”按入“登录电子邮件”框中。我尝试运行以下代码，但仅显示警报框？

              function presskey()
              { 
                  var e = document.createEvent('KeyboardEvent');
                  if (e.initKeyboardEvent)
                  {
                      alert('hello'); e.initKeyboardEvent('keypress', true, true, document.defaultView, 'A', 0, '', false, '');
                  }
                  document.getElementById('login-email').dispatchEvent(e);
              }


var elem = document.getElementById('login-email');
elem.AddEventListener("keypress", (e) => {

    var e = document.createEvent('KeyboardEvent');
    if(e.keyCode === 65) {
        //...
    }
    document.getElementById('login-email').dispatchEvent(e);
});

按键功能在javascript中不起作用

4 个答案: