JavaScript设置表单value控制台可见但输入框不显示无法提交

问题现象 #

使用JavaScript给form内的表单字段赋值时，运行代码后控制台可正常打印设置的"415V"值，但值未在输入框内显示，提交按钮无法点击。

复现代码 #

function myfn(){
  document.getElementsByName("ELEC_CURR_B_PHASE").value="415V";
  var x= document.getElementsByName("ELEC_CURR_B_PHASE").value="415V";
  console.log(x);
};
myfn()

问题根因 #

• document.getElementsByName() 返回值是匹配对应name的所有DOM元素组成的NodeList集合，不是单个输入框元素。直接给集合对象设置value属性，只是给集合对象新增了一个自定义属性，根本没有修改真实输入框的value，所以输入框不会显示内容。
• 即使正确给输入框赋值，很多基于React/Vue实现的现代表单不会监听DOM属性的直接修改，不会同步表单状态，也会导致提交按钮不激活。

修复代码 #

function myfn(){
  // 取匹配集合的第一个元素，即目标输入框
  const targetInput = document.getElementsByName("ELEC_CURR_B_PHASE")[0];
  // 给真实输入框赋值
  targetInput.value = "415V";
  // 派发冒泡的input事件，通知页面框架值已变更，同步表单状态
  targetInput.dispatchEvent(new Event('input', { bubbles: true }));
  // 补充派发change事件，兼容部分表单的事件监听逻辑
  targetInput.dispatchEvent(new Event('change', { bubbles: true }));
  console.log(targetInput.value);
};
myfn()

参考截图 #

• 代码运行结果截图：
• 元素审查截图：

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