使用JavaScript触发HTML DOM元素EventListener 解决input赋值不生效问题

根因说明 #

你使用的是ExtJS框架生成的表单控件，直接修改DOM的value属性只会更改页面展示内容，不会更新ExtJS组件内部维护的表单值状态，表单提交时读取的是ExtJS内部存储的值，因此会判定为未填写。

方案1（优先使用，稳定性最高） #

直接调用ExtJS官方提供的组件API赋值，会自动同步状态、触发所有关联事件，完全等同于手动输入效果：

// 获取绑定到DOM元素的ExtJS组件实例
const inputComponent = Ext.get('userId-inputEl').component;
// 调用组件原生赋值方法
inputComponent.setValue('test');

方案2（无法获取Ext全局对象时使用） #

如果页面封装后拿不到Ext全局对象，按以下顺序触发带冒泡属性的原生事件即可，你之前触发事件未生效大概率是未配置bubbles:true参数，ExtJS的事件大多是委托在父级元素监听，不冒泡无法被捕获：

const input = document.getElementById('userId-inputEl');
// 触发聚焦事件
input.dispatchEvent(new Event('focus', { bubbles: true }));
// 给DOM赋值
input.value = 'test';
// 触发输入事件，通知框架内容变更
input.dispatchEvent(new InputEvent('input', { bubbles: true, data: 'test' }));
// 触发值变更事件
input.dispatchEvent(new Event('change', { bubbles: true }));
// 触发失焦事件，完成ExtJS的状态校验更新
input.dispatchEvent(new Event('blur', { bubbles: true }));
// 可选：低版本ExtJS可手动移除空值样式类
input.classList.remove('x-form-empty-field');

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