JavaScript .value赋值后按钮仍禁用的技术问题咨询

为啥会这样？ #

不管是OpenSea的出价按钮，还是Twitter的登录按钮，它们的启用逻辑都依赖浏览器原生输入事件——比如input、change。用户手动输入时，浏览器会自动触发这些事件，页面的验证脚本收到事件后，才会检查输入内容是否符合要求，进而更新按钮状态。

但你用textObject.value = xxx直接修改DOM属性时，只是改了输入框的显示内容，不会自动触发这些事件。页面的验证脚本根本没收到“输入内容更新”的信号，自然不会把按钮从禁用改成可用。

怎么解决？ #

手动触发对应的输入事件就行，推荐优先用input事件（大部分网站都监听这个），代码示例：

// 先给输入框赋值
const inputElement = document.querySelector('目标输入框选择器');
inputElement.value = '要设置的内容';
// 手动触发input事件，通知页面内容已更新
inputElement.dispatchEvent(new Event('input'));

如果上面的方法没用，可以试试触发change事件（部分网站会在输入框失去焦点时验证）：

inputElement.value = '要设置的内容';
inputElement.dispatchEvent(new Event('change'));

极端情况下，有些网站会在输入框失去焦点时做最终校验，这时可以再加个blur事件：

inputElement.value = '要设置的内容';
inputElement.dispatchEvent(new Event('input'));
inputElement.dispatchEvent(new Event('blur'));

额外提醒 #

不同网站监听的事件可能不一样，多试几种组合就行。另外，少数网站可能有反自动化检测，比如检查输入操作是否符合人类行为特征（比如输入速度、鼠标移动轨迹），这种情况即使触发事件也可能无效，但普通表单场景用上面的方法基本都能解决。

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