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: https://stackoverflow.com/questions/65558501/why-cant-i-press-enter-programatically — AbsoluteBeginner, Jan 04 '21 at 09: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, Jan 04 '21 at 10:01

harlott · Answer 1 · 2021-01-04T13:29:47.840

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 04 '21 at 13:29

answered Jan 04 '21 at 09:49

harlott

89
6

Yes trying exactly the same. But I want to dispatch it via an input textbox and let the value be updated in textbox. – Anuj Pandit Jan 04 '21 at 11:50
I was answering to your precedent question. After your edit, i can suggest reading https://stackoverflow.com/questions/50219800/chrome-simulate-keypress-events-on-input-text-field-using-javascript#answers-header – harlott Jan 04 '21 at 13:19

Programmatically press keys on webpage using javascript

1 Answers1