如何在Chrome控制台用JavaScript填充输入框后触发页面更新？

直接通过document.getElementById("blankID").value = 1;修改输入框值时，只会改变DOM的属性，不会触发浏览器原生的输入相关事件——而页面的更新逻辑大概率是绑定在这些事件上的，所以得手动触发对应的事件来模拟用户操作。

试试下面几种方案：

1. 触发input事件（实时更新场景常用） #

大部分页面会监听input事件来响应实时输入，手动派发这个事件就能模拟用户输入的行为：

const input = document.getElementById("blankID");
input.value = 1;
// 触发input事件
input.dispatchEvent(new Event('input'));

2. 触发change+blur事件（失焦后更新场景） #

如果页面是在输入框失焦后才更新，那需要模拟失焦时触发的change和blur事件：

const input = document.getElementById("blankID");
input.value = 1;
// 触发change事件（失焦时触发）
input.dispatchEvent(new Event('change'));
// 模拟失焦操作
input.dispatchEvent(new Event('blur'));

3. 模拟回车操作（回车触发更新场景） #

要是页面需要按回车才更新，就模拟回车的按键事件：

const input = document.getElementById("blankID");
input.value = 1;
// 完整模拟回车的按下和抬起
input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
input.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter', bubbles: true }));

如果以上方法都没效果，可以打开Chrome开发者工具的「Elements」面板，找到输入框后查看「Event Listeners」，看看页面到底监听了哪些事件，再针对性触发就行。

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