最可靠方式是直接赋值input.value；需注意：setAttribute("value")仅改HTML属性不影响当前显示，受控组件中须同步状态，修改后如需触发逻辑应手动dispatch事件，且number/date等类型须严格匹配格式。
直接赋值 input.value 是最可靠的方式
绝大多数场景下，修改 <input> 的显示值，直接写 input.value = "新值" 就行，不需要触发事件或额外处理。浏览器会同步更新 UI，且兼容所有现代浏览器和 IE9+。
常见错误是误用 input.setAttribute("value", "新值") —— 这只会改 HTML 属性（即初始值），不会影响当前已渲染的输入框内容，用户看到的还是旧值。
-
input.value操作的是 DOM 元素的「当前值」，反映真实状态 -
setAttribute("value", ...)操作的是 HTML 属性，只在页面首次加载或重置时起作用 - 如果 input 是受控组件（比如 React 中），必须配合状态更新，仅改
value不会触发重新渲染
需要触发 input 或 change 事件时手动 dispatch
单纯改 value 不会自动触发原生事件。如果你依赖监听 input、change 的逻辑（比如表单校验、联动更新），得手动派发事件。
例如：
立即学习“前端免费学习笔记（深入）”；
const el = document.getElementById("myInput");
el.value = "abc";
el.dispatchEvent(new Event("input", { bubbles: true }));
- 用
input事件模拟用户实时输入（如搜索框联想） - 用
change事件模拟失焦后确认（如选项切换后提交） - 注意：IE11 不支持
new Event()，需用document.createEvent回退
处理 type="number" 或 type="date" 等特殊类型时注意格式
这些类型对 value 的赋值有严格要求，填错格式会导致赋值失败（值变为空字符串），但不报错。
-
type="number"：必须传数字字符串（如"123"），不能是"123px"或空格包裹的" 123 " -
type="date"：必须是YYYY-MM-DD格式（如"2024-05-20"），其他格式（如"20/05/2024"）会被忽略 -
type="datetime-local"：格式为"YYYY-MM-DDTHH:mm"，注意中间是大写T
Vue/React 等框架中不要绕过响应式系统直接操作 value
在框架环境下，直接改 input.value 会让视图和状态脱节。比如 Vue 中你改了 DOM 的 value，但 v-model 绑定的数据没变，下次 re-render 会把 DOM 又刷回旧值。
- Vue：应更新
data或ref，让v-model自动同步 - React：应调用
setState或useStatesetter，而不是ref.current.value = ... - 只有在极少数需要绕过框架（如聚焦后清空、第三方库集成）时才直接操作 DOM，且之后要手动同步状态
value 看似简单，但类型校验、事件触发、框架边界这三处最容易漏掉——尤其是 date/number 输入框里塞了错格式字符串，控制台不报错，值却悄悄变空。 
