Dispatch / generate keydown event in Vanilla JS (no jQuery, use Vanilla JS)

Question

How can I simulate a keypress to an input, using vanilla javascript?

I have tested every possible answer on SO and elsewhere, and it doesn't work on Chrome or Firefox.

For example, let's say we have a form:

<input id="myInput" type="text">
<button id="myButton>Click Me</button>

How could I make it so that when the button is clicked, the letter "a" is added to the input?

Do you need the keypress event as well? If not, Carls' solution is enough. If you actually have need for the event object ( so you can check things like event.keyCode and such ), you'll have to create the event yourself and dispatch it. — Shilly
– Shilly, Commented Aug 14, 2018 at 13:05
vanilla-javascript is already a synonym for javascript. No need to create another one. — Vadim Kotov
– Vadim Kotov, Commented Aug 14, 2018 at 13:11
@str what I already tried: stackoverflow.com/questions/596481/… elgervanboxtel.nl/site/blog/… — Bruno Crosier
– Bruno Crosier, Commented Aug 14, 2018 at 13:42

Carl Edwards · Accepted Answer · 2018-08-14 13:44:44Z

4

You'd first add a keyup event listener to the document object and inside the callback you assign the value of the input via value depending on which key was pressed:

var input = document.getElementById("myInput");

document.addEventListener('keyup', function(e) {
  if (e.which === 39 || e.which === 19) {
    input.value += 'a';
  }
});

<input id="myInput" type="text" />

<button id="myButton">Click Me</button>

edited Aug 14, 2018 at 13:44

answered Aug 14, 2018 at 13:01

Carl Edwards

14.6k12 gold badges70 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

JanWillem Huising Over a year ago

since OP asked for an example where you add an "a" you should replace "input.value = 'a';" with "input.value += 'a';". Otherwise your just setting the value. Still upvoted as best answer

Bruno Crosier Over a year ago

Thank you for your answer. Yes this way would work, however I am trying to simulate an actual keypress. Specifically, I want to press the "right arrow" key. This method wouldn't work in that case. Is there any way to actually dispatch a keypress with the desired kecode? For example, for ArrowRight, it would be 19 (www.keycode.info)

Carl Edwards Over a year ago

yea...gimme a sec.

Bruno Crosier Over a year ago

hey @CarlEdwards did you manage to find a solution for this at all? :)

Carl Edwards Over a year ago

Can you explain to me one more time what you want? From what I collect, you wanna trigger the keyup event from clicking the button, correct? Did you also want there to be a keyup event as well. Or is the functionality geared solely towards the button?

|

Manu Sampablo · Accepted Answer · 2020-10-28 18:50:41Z

0

This way works i think:

<html>
<body>

<input type="text" id="myText" placeholder=" ">

<button id="but1" onclick="myFunctionA()">A</button>
<button id="but2" onclick="myFunctionB()">B</button>

<script>
  function myFunctionA() {
  document.getElementById("myText").placeholder = document.getElementById("myText").placeholder + "A";
}

function myFunctionB() {
  document.getElementById("myText").placeholder = document.getElementById("myText").placeholder + "B";
}

//And so on 

</script>

</body>
</html>

Any doubts tell me

answered Oct 28, 2020 at 18:50

Manu Sampablo

3505 silver badges18 bronze badges

Collectives™ on Stack Overflow

Dispatch / generate keydown event in Vanilla JS (no jQuery, use Vanilla JS)

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related