使用原生JS为DOM元素设置value不生效，点击继续按钮校验失败如何解决

问题原因 #

当前绝大多数现代前端项目（如React、Vue开发的页面）的表单输入框都是受控组件，输入值会被框架同步存储在内部状态中，直接修改DOM节点的value属性不会触发框架的状态更新，表单提交/校验时读取的还是框架内部存储的旧值，所以会出现已填值但识别不到的情况。

解决方法 #

修改完输入框值后，手动触发输入框的绑定事件即可，完整代码如下：

原生JS写法 #

const targetInput = document.querySelector("#custom-input-element");
// 填入指定值
targetInput.value = '1';
// 依次触发input、change、blur事件，覆盖绝大多数场景的监听逻辑
targetInput.dispatchEvent(new Event('input', { bubbles: true }));
targetInput.dispatchEvent(new Event('change', { bubbles: true }));
targetInput.dispatchEvent(new Event('blur', { bubbles: true }));

如果目标输入是contenteditable为true的可编辑元素，将赋值逻辑替换为targetInput.textContent = '1'即可，后续触发事件的逻辑不变。

jQuery写法 #

$("#custom-input-element").val('1').trigger('input').trigger('change').trigger('blur');

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