javascript - 无法用 javascript 填充输入

Question

我正在尝试使用 javascript填写https://account.protonmail.com/login上的输入。

首先导航到https://account.protonmail.com/login并在 devtools 中运行以下 javascript：

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

并填写表格：

但是当我点击“登录”时，这些值就消失了：

单击“登录”时如何保留这些值？

标签： javascriptinput

Answer 1

根据其源代码，您链接的 Proton 帐户页面基于 React。React（像许多其他框架一样）侦听特定事件以了解用户是否更改了表单字段中的值。

幸运的是，另一个 SO 线程中的回答者能够利用一个简单的函数来实现相同的功能，您可以重复使用它来完成字段并触发适当的事件和验证逻辑。您的代码将如下所示：

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');

这允许在最新版本的 Chrome 中的开发人员控制台中运行此代码时为我传递字段验证。