HTML 表单不要让我用 javascript 填充它答案

【问题标题】：HTML Form don't let me fill it with javascriptHTML 表单不要让我用 javascript 填充它
【发布时间】：2022-09-23 19:56:56
【问题描述】：

我是 javascript 新手，我需要填写此表格，然后单击按钮登录。希望有人可以引导我找到为什么它不起作用的正确方向。

<form data-v-d9a0abfc=\"\" data-v-48366e1e=\"\" role=\"form\" class=\"form loginForm\">
      <h2 data-v-d9a0abfc=\"\" role=\"region\" class=\"visuallyhidden\">Login form</h2>
      <label data-v-d9a0abfc=\"\" for=\"loginUsername\" class=\"loginLabel\">Username</label>
      <input data-v-d9a0abfc=\"\" spellcheck=\"false\" type=\"text\" id=\"loginUsername\" name=\"loginUsername\" autofocus=\"autofocus\" class=\"form-control loginField\">
      <label data-v-d9a0abfc=\"\" for=\"password\" class=\"loginLabel\">Password</label>
      <input data-v-d9a0abfc=\"\" type=\"password\" id=\"password\" name=\"password\" autofocus=\"autofocus\" class=\"form-control loginField\">
      <!---->
      <!---->
      <!---->
      <!---->
      <!---->
      <!---->
      <div data-v-d9a0abfc=\"\" class=\"\">
        <div data-v-304a83cb=\"\" data-v-d9a0abfc=\"\" role=\"alert\" aria-relevant=\"additions removals\" style=\"display: none;\">
          <!---->
        </div>
        <div data-v-7224d6b7=\"\" data-v-d9a0abfc=\"\" class=\"ace-button\" id=\"accept-button\">
          <!---->
          <button data-v-7224d6b7=\"\" aria-describedby=\"11\" tabindex=\"0\" type=\"button\" class=\"button ok\">
            <!---->
            <!----> Login
          </button>
        </div>
      </div>
      <!---->
      <!---->
      <!---->
    </form>

在我测试过的几乎任何其他网站上，它都可以正常工作（基本上只是切换了“Id”）——但在这个特定的网站上却不行。该站点不对外开放，因此我无法提供它的 URL。

问题是如果我手动填写用户名和密码，然后从 Web 控制台使用下面的 .click 事件，登录工作正常。

当我使用 .value 事件来填充用户名和密码时，我可以看到两个字段都被填充了，但是当 .click 事件发生时，它会触发登录并且它似乎可以工作，但几秒钟后，它只是说用户名和密码无效，就像我输入了错误的用户名和密码一样。

由于我无法从表单中看到明文密码，我不知道它是否正确，但如果我使用网络浏览器的控制台，我可以看到用户名和密码都返回正确的价值观。

我正在使用以下代码：

function doStuff(){
    document.getElementById(\'loginUsername\').value = \"username@email.com\";
    document.getElementById(\'password\').value = \"password123\"
    document.getElementsByClassName(\'button ok\')[0].click();
}

该网站可能使用了一个框架来监听输入 onchange 并将其存储在内存中。但是，当您以编程方式更新值时，不会触发 onchange。然后在提交时，它会发送内存中的值，而不是您以编程方式添加的值。如果您查看开发工具的网络选项卡，您可能会看到登录请求并查看发送到后端的值（假设他们在将它们发送到后端之前没有对其进行哈希处理）

标签： javascript

【解决方案1】：

button ok 不是类名（它是多个类 button 和 ok），一个类不能包含空格字符，因此最好通过 ok 类选择该元素（假设它是唯一的或者它真的是第一个ok 类）。

function doStuff(){
    document.getElementById('loginUsername').value = "username@email.com";
    document.getElementById('password').value = "password123"
    document.getElementsByClassName('ok')[0].click();
}

【讨论】：

document.getElementsByClassName('button ok') 选择具有两个类的元素。