How to Simulate Typing in an Input Box with Javascript?

Question

What I am trying to do is make the input box think that I am typing numbers into it rather than changing the value of said input. So the first thing I did was make the input box a variable:

var input = document.querySelectorAll("input")[1];

Then what I did was focus the input box to make it seem like I had clicked in it with my mouse:

input.select();

This is the part that I am now stuck on. What I would like to do is make the input box think that I typed a number into it, say, 41. If anyone could please tell me what code I need to put into console to make the input box think I typed in "41", it would be greatly appreciated. Thank you.

Answer 1

I know this was really really long ago, but I'm currently working on a very similar problem and encountering the exact same issues that the original poster was encountering, and I found this code snippet (credit):

element.dispatchEvent(new KeyboardEvent("keydown", {
    key: "e",
    keyCode: 69,        // example values.
    code: "KeyE",       // put everything you need in this object.
    which: 69,
    shiftKey: false,    // you don't need to include values
    ctrlKey: false,     // if you aren't going to use them.
    metaKey: false      // these are here for example's sake.
}));

And the specific key codes you need can be found here.

This is definitely an extremely overcomplicated way of doing things, you'd need something to translate whatever input string you have into a list of instances of KeyboardEvent, and then dispatch them one by one, but as far as I can tell this is the proper way to truly "simulate" keyboard input.

Answer 2

You can use setTimeout and add one character each time like this :

var input = document.querySelectorAll("input")[1];
input.select(); // you can also use input.focus()
input.value="";

var text = "41";
var l=text.length;
var current = 0;
var time = 1000;


var write_text = function() {
  input.value+=text[current];
  if(current < l-1) {
    current++;
    setTimeout(function(){write_text()},time);
  } else {
    input.setAttribute('value',input.value);
  }
}
setTimeout(function(){write_text()},time);

<input type="text">
<input type="text">

This will work with any content you want to write, you simply need to adjust the variable with what you need.