按键功能在 javascript 中不起作用

Question

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

但是此代码没有为 "login-email" 输入（文本框）设置任何值。

代码有什么问题？

          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

Mb 你试试addEventListener？

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

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

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

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

});

Answer 2

您可以通过制作 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)
});

NOTE: the key code for each button is come from assci code if you don't know what is it you can check this link

Answer 3

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

请注意，我想通过运行按下 presskey() 函数以编程方式将字母 "A" 按下到 'login-email' 框中。我尝试运行下面的代码但只显示警告框？

              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);
});

Answer 4

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

也就是说，我的其余回答假设问题实际上应该是 "How do I manually trigger input events on a textbox?"。如果这实际上不是您想要的，请告诉我，但相同的概念应该适用于其他类型的事件。

...如果这是你的实际问题，我可以告诉你我将如何开始解决这个问题：

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"/>

按键功能在 javascript 中不起作用

Keypress function not working in javascript

javascript

keypress