为何document.getElementById(...).value需聚焦/blur才在登录页生效？

我之前在Stack Overflow上提问关于IntelliZoom登录页自动登录的问题：用Tampermonkey脚本直接设置用户名和密码后，登录按钮始终无法激活。用户markfila提供了触发blur事件的解决方案，代码如下：

setTimeout(function(){
    document.getElementById("email").value = "username@Domain.co.uk";
    document.getElementById("password").value = "password";

    // markfila提供的解决方案：触发事件以激活登录按钮
    let event = new Event("blur");
    document.getElementById("email").dispatchEvent(event);
    document.getElementById("password").dispatchEvent(event);

    // 登录按钮已激活，点击提交
    document.getElementsByClassName("button large primary is-rounded")[0].click();
},100);

作为新手，我想彻底搞懂原理，自己写了一段通过切换焦点实现的代码，同样有效：

setTimeout(function(){
    document.getElementById("password").focus();
    document.getElementById("password").value = "password";
    document.getElementById("email").focus();
    document.getElementById("email").value = "username@Domain.co.uk";
    document.getElementById("password").focus();
    document.getElementsByClassName("button large primary is-rounded")[0].click();
},100);

测试后发现两个关键现象：

• 输入框的value属性只有两种情况能成功生效：要么先聚焦字段再设置.value，要么触发blur事件
• 登录按钮仅在两个字段值都成功设置，且触发blur事件（切换焦点或手动触发）后才会激活

疑问解答 #

1. 为何直接用document.getElementById("...").value无法成功设置值，必须先聚焦或触发blur？

这是因为该网站的登录表单大概率用了React、Vue这类前端框架。这类框架不会直接监听DOM元素的value属性变化，而是依赖input、blur、change这类输入相关事件来同步内部状态、执行校验逻辑。你直接修改DOM的value，框架完全感知不到值的变化，自然不会更新表单的校验状态，登录按钮也就不会激活。

而聚焦（focus）或触发blur事件时，会触发框架监听的状态更新逻辑，让框架“认可”输入框的新值，同步更新表单校验结果，按钮才会被激活。

2. 手动输入时无需离开第二个字段，只要内容有效按钮就激活，为什么？

手动输入时，每敲一个字符都会触发input事件，框架会实时监听这个事件并做实时校验。当两个字段都满足有效内容的要求时，校验逻辑会立刻通过，不管焦点是否还在第二个输入框，登录按钮都会自动激活。而脚本直接修改value不会触发input事件，所以必须靠blur或焦点切换来触发校验逻辑。

内容的提问来源于Stack Exchange，提问作者Adrian Wood