How can I simulate a keypress event specifically inside of a JS textbox?

Question

I am working on a cheat/tweak program for online school. Currently am trying to fix the "vocab completer".

Essentially the problem is that I cannot get the text box to submit the word it contains. I can have it typed in but until I personally click and press enter on the textbox it will not submit. I believe all of the selectors are correct, I am just not sure how I can convince the textbox to submit. I do not think that this is a very difficult thing to do, just that I am not understanding something about events.

How can I simulate a keypress event specifically inside of a JS textbox such that it's indistinguishable from actually having done it.

Find what word is meant to be typed

    function vocabCompleter() {
    var i = 0;
    try{
    var txt = window.frames[0].document.getElementsByClassName("word-background")[0].value
    } catch{txt=""}
    var speed = 50;


Types word out, could be just value = txt but this looks better

  
    function typeWriter() {
        if (window.frames[0].document.getElementsByClassName("word-textbox")[0].value.length < 
     txt.length) {
            window.frames[0].document.getElementsByClassName("word-textbox")[0].value += txt.charAt(i);
            i++;
            setTimeout(typeWriter, speed);
        }
    }
    if (txt.length > 3){

    typeWriter();

Ways I have tried to get the textbox to submit (also, .focus, .trigger)

        window.frames[0].document.getElementsByClassName("word-textbox")[0].click()
          window.frames[0].document.getElementsByClassName("word-textbox")[0].dispatchEvent(new 
     KeyboardEvent('keypress',{'key':'Enter'}));

     }

Other buttons to be clicked

    output += ("Vocab Completer, ")
    if (document.getElementById("activity-title").innerText == "Vocabulary") {
        $("#stageFrame").contents().find(".playbutton.vocab-play")[0].click()
        $("#stageFrame").contents().find(".playbutton.vocab-play")[1].click()
        try {
          if (window.frames[0].document.getElementsByClassName("word-textbox")[0].value.length = txt.length){
            $("#stageFrame").contents().find(".uibtn.uibtn-blue.uibtn-arrow-next")[0].click()
          }
        } catch (TypeError) {}
    }
}

[`document.getElementsByClassName("word-background")[0]`](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474) **<-- No, no, no.** — Scott Marcus, Feb 10 '21 at 15:42
Instead of trying to simulate a keystroke, why not just directly call the function that the keystroke event would have invoked? — Scott Marcus, Feb 10 '21 at 15:43
I wouldn't know how to do that, the textbox and everything I am interacting with are on a separate webpage. Maybe it is possible but it's very unclear from the pages code where that function would be, I only really know how it behaves from the outside. — roglemorph, Feb 10 '21 at 15:58

How can I simulate a keypress event specifically inside of a JS textbox?

0 Answers0