如何通过JavaScript标记输入字段为已修改/编辑状态？

直接通过document.getElementById('username').value = 'xxx'赋值失败的核心原因是：表单校验逻辑监听的是用户交互触发的事件（如input、change），而非单纯的value属性变更，同时表单内部可能维护了「字段是否已修改」的状态（比如dirty标记），直接赋值不会更新这些状态。

以下是三种可行的解决方法：

方法一：触发标准输入事件（最通用） #

赋值后手动触发浏览器原生输入事件，让表单认为是用户手动输入的内容：

const input = document.getElementById('username');
// 1. 设置字段值
input.value = 'name@gmail.com';
// 2. 触发input事件（手动输入时必然触发的核心事件）
input.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
// 3. 可选：若校验还监听change事件，补充触发
input.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));

如果表单基于Vue/React等框架开发，可能需要额外触发框架内部状态更新，比如Vue可尝试input.__vue__.$forceUpdate()，但原生事件触发仍是基础操作。

方法二：模拟真实按键操作（针对严格校验） #

部分表单会检查事件的isTrusted属性（判断是否为用户真实操作），此时可模拟完整按键流程绕过：

const input = document.getElementById('username');
input.value = '';
const text = 'name@gmail.com';
// 逐个模拟输入字符
text.split('').forEach(char => {
  input.value += char;
  input.dispatchEvent(new KeyboardEvent('keypress', { key: char, bubbles: true }));
});
// 收尾触发核心事件
input.dispatchEvent(new Event('input', { bubbles: true }));

也可按你提到的「模拟退格键」思路实现：

const input = document.getElementById('username');
input.value = 'name@gmail.com';
// 模拟退格删除最后一个字符
input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Backspace', bubbles: true }));
// 重新补全内容
input.value = 'name@gmail.com';
input.dispatchEvent(new Event('input', { bubbles: true }));

方法三：直接标记字段为已修改（针对特定表单） #

若表单内部有明确的「已修改」标记（比如部分UI库组件的_dirty、isDirty属性），可直接修改这些状态：

const input = document.getElementById('username');
input.value = 'name@gmail.com';
// 假设组件有isDirty属性，标记为已修改
input.isDirty = true;
// 若使用HTML5约束验证，清除错误提示
input.setCustomValidity('');

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