实现自动登录时应触发哪个事件来接收表单输入？

兄弟，我来给你捋捋这个事儿～结合你说的正在学DOM方法、在Chrome里测试自动登录脚本的背景，分两种情况给你讲：

一、无前端限制的简单场景：直接填完提交就行 #

如果目标网站没有那种“输入为空就禁用提交按钮”的前端限制，其实你根本不用特意触发什么输入事件，直接给输入框赋值后调用表单的提交方法就搞定了。举个例子：

// 先拿到页面上的对应元素（记得替换成实际的选择器）
const usernameInput = document.querySelector('#username');
const passwordInput = document.querySelector('#password');
const loginForm = document.querySelector('#login-form');

// 填充账号密码
usernameInput.value = '你的用户名';
passwordInput.value = '你的密码';

// 直接提交表单
loginForm.submit();

二、遇到带前端验证的网站（比如输入后才启用提交按钮） #

有些网站会监听输入框的input或者change事件，用来做实时验证、启用提交按钮这类操作。这时候你光给输入框赋值没用，页面的JS检测不到值变化，按钮还是灰的，提交不了。这时候就得手动触发对应的事件：

• 如果网站是实时监听输入（比如输入一个字符就更新状态），触发input事件：

  usernameInput.dispatchEvent(new Event('input'));
  passwordInput.dispatchEvent(new Event('input'));
  

• 如果网站是失去焦点才验证（比如输入框离开后才检查内容），触发change事件：

  usernameInput.dispatchEvent(new Event('change'));
  passwordInput.dispatchEvent(new Event('change'));
  

触发完事件后，再调用loginForm.submit()就没问题了。

小技巧：怎么确定网站用了哪个事件？ #

打开Chrome开发者工具（按F12），选中输入框，切换到「Event Listeners」面板，就能看到这个输入框绑定了哪些事件，找和输入相关的（比如input、change、keyup这些），针对性触发就行。

备注：内容来源于stack exchange，提问作者Eric F