Chrome书签JS自动填充密码提交后字段为空的问题求助

直接通过JS修改密码输入框的value属性时，很多登录表单不会识别到内容变更——这类表单通常依赖input、change或blur等事件同步字段状态，手动修改DOM属性不会触发这些事件，导致提交时表单认为密码字段为空。

以下是几种可行的解决方法：

方法1：触发输入事件（推荐） #

通过dispatchEvent手动触发input和change事件，让表单感知到内容变化：

let passwordBox = document.querySelector("input[type='password']");
passwordBox.value = "myPassword";
// 触发input事件，同步表单字段状态
passwordBox.dispatchEvent(new Event('input', { bubbles: true }));
// 可选：触发change事件，确保所有校验逻辑执行
passwordBox.dispatchEvent(new Event('change', { bubbles: true }));
document.getElementById('loginButton').click();

方法2：模拟焦点切换 #

模拟真实用户的输入流程：先聚焦输入框，设置值后再失焦，触发blur事件：

let passwordBox = document.querySelector("input[type='password']");
passwordBox.focus();
passwordBox.value = "myPassword";
passwordBox.blur();
document.getElementById('loginButton').click();

方法3：模拟键盘输入（极端场景） #

如果前两种方法无效，可尝试模拟真实的键盘按键输入，完全还原用户操作：

let passwordBox = document.querySelector("input[type='password']");
passwordBox.focus();
const password = "myPassword";
for (const char of password) {
  // 触发keydown事件
  passwordBox.dispatchEvent(new KeyboardEvent('keydown', { key: char }));
  // 更新输入框值
  passwordBox.value += char;
  // 触发input事件同步状态
  passwordBox.dispatchEvent(new Event('input', { bubbles: true }));
}
passwordBox.blur();
document.getElementById('loginButton').click();

这些方法的核心都是让表单内部状态与DOM的value属性同步，解决JS直接赋值不被识别的问题。

内容的提问来源于stack exchange，提问作者Matt