Can't fill input with javascript

Question

I'm trying to fill inputs on https://account.protonmail.com/login with javascript.

First navigate to https://account.protonmail.com/login and run the following javascript in devtools:

document.querySelector('#username').value = 'MyUser'
document.querySelector('#password').value = 'MyPassword'

And the form is filled:

But when I click on "Sign in", the values are gone:

How can I keep the values when I click on "Sign in"?

It does work, https://jsfiddle.net/41qgt39v/1/, so the problem is elsewhere — Jared Farrish, Jun 14 '21 at 14:41
@JaredFarrish You don't understand this question and you haven't run the same test as I did. — daisy, Jun 14 '21 at 14:44
try triggering oninput or onchange to run whatever is setting the values elsewhere — mplungjan, Jun 14 '21 at 14:46

esqew · Accepted Answer · 2021-06-14T15:03:31.927

The Proton Account page you linked is based on React, according to its source code. React (like many other frameworks) listens for specific events to know whether or not a user has changed values in form fields.

Fortunately, answerers in another SO thread were able to leverage a simple function for this same functionality, which you can re-use to complete the fields and trigger the appropriate events & validation logic. Your code would look something like this:

function changeValue(input,value){

    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(
      window.HTMLInputElement.prototype,
      "value"
    ).set;
    nativeInputValueSetter.call(input, value);

    var inputEvent = new Event("input", { bubbles: true });
    input.dispatchEvent(inputEvent);
}

changeValue(document.querySelector('#username'), 'MyUser');
changeValue(document.querySelector('#password'), 'MyPassword');

This allows the field validation to be passed for me when running this code in the developer console within the latest release of Chrome.

Can't fill input with javascript

1 Answers1