时间戳

首页 > 解决方案 > JavaScript 设置值后，输入表单判断为空

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

问题描述

我正在尝试编写一个小脚本，该脚本会在此登录页面中自动输入用户名。根据 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事件绑定到该字段。但是，即使我执行keydownmousedownonChange

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

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

两个问题：

标签： javascripthtmlformsdom

解决方案

问题 1

只需将下面的行添加到第一个代码段，问题就解决了。

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”并找到了这个答案。

同样，我不知道为什么会有{bubbles: true}这个技巧，应该附加到这个答案或在另一个答案中解释。

推荐阅读