按键功能在javascript中不起作用

Question

I am trying to and have to keypress the letter 'A' with JavaScript. In the code below, there is an alert('hello') box that indicates that the code is executing.

But this code doesn't set any values to the "login-email" input (which is a textbox).

What can be wrong with the code?

  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

First, I'd like to note that .initKeyboardEvent() is deprecated . What you likely want is the event constructor (Ex. for an 'input' event, new InputEvent() , as seen in the code below)

That said, the rest of my answer assumes the question should actually be "How do I manually trigger input events on a textbox?". Please let me know if this isn't actually what you want, but the same concepts should apply to other types of events.

...if this is your actual question, I can show you how I would start solving this problem:

 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 you try addEventListener?

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

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

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

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

});

Answer 3

you can make it by makeing keydown event then you can get your button keycode

like this

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

so in your code it will be like this

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

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

if you don't know which keycode you need to check this website will give you the code for each key

or if you want do it from your key name you can make it like this

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 4

I have tried to combine the code now but are not sure if I do this right.

Please notice that I want to programatically press the letter "A" into the 'login-email' box by running the presskey() function. I tried to run the below code but only the alert box is shown?

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