如何绕过 javascript 文本框的按键要求？

Question

Hello and thanks for reading.

So I am trying to automatically log into this form using Chrome.

https://app.patientaccess.com/login

I use my own Chrome extension to do this. It's basically just a javascript file that fills in the fields automatically. I use it for a range of websites.

For example, this is my function for filling in a textbox:

function fld(param, val){try{document.querySelectorAll(param)[0].value = val} catch(e){}}

And I call it like this:

fld("input[id='loginForm-email']", "mail@myemail.com")

For most websites it works. But for the Patient Access website above, it doesn't and I think the reason is because the password textbox requires a physical keypress (or listening for a change event or something).

When I run my script, it fills in the textboxes just fine but it doesn't let me click next because, even though the textboxes appear to be filled in, the webpage knows that I haven't actually pressed any keys.

To get around it, I have to have my script fill in the form, then click in the password box, press space, delete the space I just entered and then it lets me sign in because it knows I have physically pressed a key in the password box.

So my question is how can I make my automatic sign in javascript work on this website?

I don't think a script can use keypress events to type into a textbox but that's ok because I can fill in the textbox programmatically (using the fld function above). But how can I convince the page that I have typed into the password textbox so it lets me submit the form?

I am using JavaScript as I said and I can include jQuery if needed.

Thanks.

Answer 1

After much trial and error, I was able to solve it with JavaScript using this:

var fireOnThis = document.querySelectorAll("[type='text']")[0]
const changeEvent = new Event('input', { bubbles: true, cancelable: true });
fireOnThis.dispatchEvent(changeEvent);

It works absolutely beautifully. I turned this into a function and all I do is run this function after automatically filling in the text field (it doesn't work before filling in the field, has to be after).

I tried many other solutions on other websites and none worked but this one does. Whee!

I got the concept from a Chrome Extension called Form Filler . I tried the extension on the form I was trying to automate and to my surprise, it filled in the form without issue. So I looked at the source code to find out how it did it and I found this:

['input', 'click', 'change', 'blur'].forEach(event => {
  const changeEvent = new Event(event, { bubbles: true, cancelable: true });
  element.dispatchEvent(changeEvent);
});

So I just converted that into the code in my answer and it worked a treat. So credit should really go to Hussein Shabbir, the developer of Form Filler.