如何用JavaScript实现输入框输入完成登录？解决赋值后内容消失问题

直接用document.getElementById('').value = "内容"给输入框赋值后，点击输入框内容消失、登录流程无法执行，核心原因是你只修改了输入框的DOM属性，但没触发网站前端逻辑依赖的输入事件——很多网站会监听input、change等事件来同步数据到框架（比如Vue/React）、更新表单状态或校验，没触发这些事件的话，网站内部状态没认到你的输入，focus时就可能重置内容。

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

方法1：赋值后触发输入/变更事件 #

这是最简单的方案，赋值后手动触发网站监听的事件，让前端逻辑识别到输入：

// 获取目标输入框
const inputElement = document.getElementById('你的输入框ID');
// 设置值
inputElement.value = '要填充的内容';
// 触发input事件（大部分网站会监听这个）
inputElement.dispatchEvent(new Event('input', { bubbles: true }));
// 如果上面不行，试试触发change事件
inputElement.dispatchEvent(new Event('change', { bubbles: true }));

方法2：模拟真实手动输入过程 #

如果网站有严格的输入校验（比如监听按键事件），可以模拟逐个字符输入的完整流程，更接近用户手动操作：

// 封装模拟输入的函数
function simulateRealInput(element, text) {
  element.focus(); // 先聚焦输入框
  element.value = ''; // 清空原有内容
  // 逐个字符模拟输入
  for (const char of text) {
    // 触发按键按下、按键按压、输入、按键抬起事件
    element.dispatchEvent(new KeyboardEvent('keydown', { key: char, bubbles: true }));
    element.value += char;
    element.dispatchEvent(new KeyboardEvent('keypress', { key: char, bubbles: true }));
    element.dispatchEvent(new Event('input', { bubbles: true }));
    element.dispatchEvent(new KeyboardEvent('keyup', { key: char, bubbles: true }));
  }
}

// 使用示例：填充用户名和密码
const usernameInput = document.getElementById('用户名输入框ID');
simulateRealInput(usernameInput, '你的用户名');

const passwordInput = document.getElementById('密码输入框ID');
simulateRealInput(passwordInput, '你的密码');

方法3：排查并处理重置逻辑 #

如果上面两种方法都无效，可以检查输入框的focus事件监听，看是否有重置内容的逻辑：

// 查看输入框的所有事件监听
console.log(getEventListeners(document.getElementById('你的输入框ID')));

如果发现focus事件里有重置逻辑，可以移除该监听，或者在赋值后手动更新网站的内部状态（比如Vue的$forceUpdate()，但需要根据网站使用的框架调整）。

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