JavaScript 设置值后，输入表单判断为空

Question

我正在尝试编写一个在this login page 中自动输入用户名的小脚本。根据 Inspector (of Firefox)，输入字段被标识为 CSS 选择器input.input.input-text.input-default。所以我写了下面的脚本。

(function() {
    "use strict";

    window.setTimeout(() => {
        const username = document.querySelector('input.input.input-text.input-default');
        username.setAttribute('value', 'test');
    }, 100); //waits a little until the input form becomes available

})();

这个输入用户名test其实是成功的，但是当我输入密码点击提交按钮时，报错信息

用户名是必填项

即使字段不为空也会打印。

之后，如果我单击用户名字段，附加任何字符，删除该字符，然后再次单击提交按钮（见下面的 gif），现在该字段的值被正确解释并出现错误消息

身份验证失败

打印出来了，这完全没问题，因为我们使用了无效的test 作为用户名。

我认为这种行为来自与输入字段相关的事件。据 Inspector 称，focus、invalid、keydown、mousedown 和 onChange 事件绑定到该字段。但是，即使我执行

username.dispatchEvent(new Event('onChange'));

或者这样，该值仍然被解释为空。

两个问题：

• 如何使脚本在这种情况下工作？

• 如果你成功地使脚本工作，你能告诉我你是如何分析网站的代码结构的吗？现在我用 Inspector 但似乎不够用。

Answer 1

问题 1

只要在第一个sn-p下面加上一行，问题就解决了。

username.dispatchEvent(new Event('input', {bubbles: true}));

所以生成的代码应该是

(function() {
    "use strict";

    window.setTimeout(() => {
        const username = document.querySelector('input.input.input-text.input-default');
        username.setAttribute('value', 'test');
        username.dispatchEvent(new Event('input', {bubbles: true})); //only difference
    }, 100);

})();

我确实不知道，为什么 {bubbles: true} 能做到这一点。

问题 2

我是这样想出这条线的：

1. 当我执行console.log(username) 时，我发现该对象具有__reactEventHandlers 属性，该属性具有onChange 方法。自

username.dispatchEvent(new Event('onChange'));

username.dispatchEvent(new Event('change'));

username.dispatchEvent(new Event('input'));

等根本不起作用，我怀疑 __reactEventHandlers 在这种情况下是相关的。

1. 为了从 JavaScript 调用 onChange 方法，我在 Google 上搜索了“javascript call react onchange”并找到了 this answer。

---

再说一次，我确实不知道为什么{bubbles: true} 会起作用，应该将其附加到此答案或在另一个答案中进行解释。