I want to 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. How can I do that?
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.
input.value="". And the input.select() will simply add the focus. Check again the answer i updated to get rid if 0I 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.
Here's an improved version of Temani Afif's answer.
I added:
function simulateTyping(text, selector) {
return new Promise((resolve, reject) => {
function random(min, max) { // min and max included
return Math.floor(Math.random() * (max - min + 1) + min);
}
const input = document.querySelector(selector);
if (!input) {
reject(`No element found for selector: ${selector}`);
return;
}
input.focus();
input.value = "";
let current = 0;
const writeText = () => {
input.value += text[current];
input.setAttribute('value', input.value);
if (current < text.length - 1) {
current++;
setTimeout(writeText, random(70, 150));
} else {
resolve(); // Typing finished
}
};
writeText();
});
}
