2

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?

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Bruno Crosier
  • 654
  • 9
  • 14
  • What *exactly* have you tried? Please show your code. – str Aug 14 '18 at 12:58
  • 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 Aug 14 '18 at 13:05
  • [tag:vanilla-javascript] is already a synonym for [tag:javascript]. No need to create another one. – Vadim Kotov Aug 14 '18 at 13:11
  • @str what I already tried: https://stackoverflow.com/questions/596481/is-it-possible-to-simulate-key-press-events-programmatically https://elgervanboxtel.nl/site/blog/simulate-keydown-event-with-javascript – Bruno Crosier Aug 14 '18 at 13:42

2 Answers2

3

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>
Carl Edwards
  • 13,826
  • 11
  • 57
  • 119
  • 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 – JanWillem Huising Aug 14 '18 at 13:12
  • 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) – Bruno Crosier Aug 14 '18 at 13:39
  • 1
    yea...gimme a sec. – Carl Edwards Aug 14 '18 at 13:40
  • hey @CarlEdwards did you manage to find a solution for this at all? :) – Bruno Crosier Aug 15 '18 at 15:12
  • 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? – Carl Edwards Aug 15 '18 at 15:14
  • Sure! Basically I want to make the click of a button trigger a keydown for the right arrow key. So, "click this button" would move the cursor of the input field along by one position. Specifically, I have an input field that has emojis in it, so setting the cursor position with setSelectionRange doesn't work, because emojis are often made up of zero width joiners. Thanks in advance! – Bruno Crosier Aug 16 '18 at 02:14
  • sorry forgot to tag you in my reply @CarlEdwards – Bruno Crosier Aug 16 '18 at 15:11
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

Manu Sampablo
  • 350
  • 5
  • 17