Automate the processing of string input into an input field

Question

Automate the processing of string input into an input field

I realize that this question has been raised numerous times before. However, the previously suggested solutions are no longer effective.

I am attempting to automate a form by simulating key presses.

For example, when I try:

document.getElementById("input_id").value = "testinput"

The input events do not get triggered. Instead, my value gets deleted.

Is there a new method to simulate keystrokes that will trigger all necessary events?

javascript input

Answer 1

Answer №1

To simulate keyboard events on an EventTarget (such as an element, Window, Document, or others), you can use the following code:

element.dispatchEvent(new KeyboardEvent('keydown', {'key': 'a'}));

Here's an example of how you can use this in your code:

let element = document.querySelector('input');
element.onkeydown = e => alert(e.key);
changeValButton.onclick = () => element.value += "a";
dispatchButton.onclick = () => {
  element.dispatchEvent(new KeyboardEvent('keydown',{'key':'E'}));
  element.dispatchEvent(new KeyboardEvent('keyup',{'key':'E'}));
}

<input type="text" value="">
<button id="dispatchButton">Press to dispatch event </button>
<button id="changeValButton">Press to change value </button>

Answer 2

To simulate keyboard events on an EventTarget (such as an element, Window, Document, or others), you can use the following code:

element.dispatchEvent(new KeyboardEvent('keydown', {'key': 'a'}));

Here's an example of how you can use this in your code:

let element = document.querySelector('input');
element.onkeydown = e => alert(e.key);
changeValButton.onclick = () => element.value += "a";
dispatchButton.onclick = () => {
  element.dispatchEvent(new KeyboardEvent('keydown',{'key':'E'}));
  element.dispatchEvent(new KeyboardEvent('keyup',{'key':'E'}));
}

<input type="text" value="">
<button id="dispatchButton">Press to dispatch event </button>
<button id="changeValButton">Press to change value </button>

Answer 3

Answer №2

After much searching, I finally stumbled upon a code snippet that did the trick for me:

function update_content(element, new_content) {
  element.value === undefined ? element.innerHTML = new_content : element.value = new_content;
  actions = ["mousedown", "mousemove", "mouseup", "click", "change"]
  for (var j = 0; j < actions.length; ++j) element.dispatchEvent(new Event(actions[j], {
    bubbles: true
  }));
}

Answer 4

After much searching, I finally stumbled upon a code snippet that did the trick for me:

function update_content(element, new_content) {
  element.value === undefined ? element.innerHTML = new_content : element.value = new_content;
  actions = ["mousedown", "mousemove", "mouseup", "click", "change"]
  for (var j = 0; j < actions.length; ++j) element.dispatchEvent(new Event(actions[j], {
    bubbles: true
  }));
}

Automate the processing of string input into an input field

Answer №1

Answer №2

Similar questions

Issue arised while trying to open Bootstrap modal window due to conflict with surrounding elements

Position of background image

Creating Global Variables in Node/Express Following a Post/Get Request

Image not showing up when using drawImage() from canvas rendering context 2D

Using Passport authentication callback rather than redirecting the user

Is there a way to obtain cookies on a Server-side component in the latest version of Next.js?

Building secure applications with React and Express using private routes

Moving from the end to the beginning with a jQuery slider transition

Creating a Duplicate of the Parent Element and its Child Elements using jQuery

"Techniques for incorporating a screen in Angular application (Switching between Edit and View modes) upon user interaction

Is it possible for the .find() method to extract values from <a> tags?

Issue with javascript code not functioning post axios request

The second function is not being executed during the callback

Adding a new item to a collection by pushing it onto an array using the

Using AngularJS to add external scripts to partials with ng-include

The method you are trying to call is not defined in Laravel

Searching for a specific value within a list that has been fetched from a database using AngularJs can be achieved by simply clicking on the search button

Testing the API call triggered by the submit button

Guide on uploading a file to Pinata directly from a React application

@vue/cli for automated unit testing