Programmatically press keys on webpage using javascript

Question

Trying to create keydown events using the below snippet. The keypress function triggers, but the value is not added to the textbox. I want to edit value of textbox 1 using the keys.

fyi - Purposely avoiding setting element.value directly


    <html>
    
    <head>
        <script>
            function f1() {
                document.querySelector("#text1").focus()
                document.querySelector("#text1").onkeydown = test;
                var keypress = 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.
                })
                console.log("srcElement" + keypress.srcElement);
                console.log("currentTarget" + keypress.currentTarget);
                var element = document.getElementById("text1")
                element.dispatchEvent(keypress);
                console.log("srcElement" + keypress.srcElement);
                console.log("currentTarget" + keypress.currentTarget);
            }
            function test(e) {
                console.log("Called" + e.key);
                console.log("Called" + e.keyCode);
            }
        </script>
    
    </head>
    
    <body onload="f1()">
        <form>
            Input 1 : <input type="text" id="text1" name="text1" />
    
            Input 2 :<input type="text" id="text2" name="text2" />
        
        </form>
    </body>
    
    </html>

Here is the output on console:

test.html:17 srcElementnull
test.html:18 currentTargetnull
test.html:25 Callede
test.html:26 Called69
test.html:21 srcElement[object HTMLInputElement]
test.html:22 currentTargetnull

Someone asked a similar question here: stackoverflow.com/questions/65558501/… — AbsoluteBeginner
– AbsoluteBeginner, Commented Jan 4, 2021 at 9:46
Did you want these events to also change values of the elements? Because it doesn't work like that. Event is event, value is value in JavaScript. By simply dispatching an event, the value will not change. — yegorchik
– yegorchik, Commented Jan 4, 2021 at 10:01

harlott · Accepted Answer · 2021-01-04 13:29:47Z

0

if i understand well the question, I think you can do:

document.addEventListener('keypress', (evt) => {
  console.log(`code = ${evt.keyCode}`);
});

var keyboardEvent = new KeyboardEvent('keypress', {bubbles:true, 'keyCode': 48});

document.dispatchEvent(keyboardEvent);

But you can't use keyboardEvent for your purpose. From @zero298 in this answer:

Note: manually firing an event does not generate the default action associated with that event. For example, manually firing a key event does not cause that letter to appear in a focused text input. In the case of UI events, this is important for security reasons, as it prevents scripts from simulating user actions that interact with the browser itself.

edited Jan 4, 2021 at 13:29

answered Jan 4, 2021 at 9:49

harlott

896 bronze badges

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

2 Comments

Anuj Pandit Over a year ago

Yes trying exactly the same. But I want to dispatch it via an input textbox and let the value be updated in textbox.

harlott Over a year ago

I was answering to your precedent question. After your edit, i can suggest reading stackoverflow.com/questions/50219800/…

Collectives™ on Stack Overflow

Programmatically press keys on webpage using javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related