需用 input + blur 组合实时监听字段有效输入状态，按控件类型区分空值判断，结合 required 属性、自定义校验及业务规则定义“完成”，排除隐藏/干扰字段，分母须动态计算总有效字段数。
怎么用 JavaScript 监听表单字段填写状态
表单完成率不是靠提交时“数几个空值”就能准确定义的——用户可能填了但删掉、可能跳过必填项、也可能用空格糊弄 required。得实时跟踪每个字段的「有效输入」状态。
关键不是监听 change，而是 input + blur 组合：前者捕获每次输入（包括粘贴、自动填充），后者兜底处理焦点离开时的最终校验。
-
input事件对<textarea></textarea>和<input>都有效，但不触发于<select></select>，后者需额外监听change - 判断“已填写”的逻辑别只用
value.trim() !== ''：日期控件（type="date"）空值是""，但时间控件（type="time"）在 chrome 中未选时可能是"00:00"，得按类型区分 - 对带
pattern或自定义校验的字段，要在blur时调用checkValidity()，否则用户填了非法内容（如邮箱格式错）也会计为“完成”
如何定义“完成”的字段边界
一个字段算“完成”，不等于它被点过或有字符——得结合业务规则。比如手机号字段，填了 3 位不算；地址字段，“上海市”算有效，“上海”可能不算（缺区县）；文件上传字段，<input type="file"> 的 files.Length > 0 才算，仅触发点击不计。
- 必填字段（
required属性存在）必须通过校验才计入完成数 - 非必填但带业务规则的字段（如“年龄 ≥ 18”），需在
blur后执行自定义函数，返回布尔值 - 隐藏字段（
display: none或type="hidden"）一律排除，它们不参与用户填写流程 - 动态渲染字段（如根据选项追加的子表单）要确保监听器绑定在父容器上，用事件委托，避免漏绑
计算完成率时容易漏掉的兼容性问题
完成率 = 已完成字段数 / 总有效字段数 × 100%，看着简单，但分母容易算错。常见错误是把所有 input、select、textarea 全塞进去，结果把按钮、搜索框、重复渲染的旧 dom 节点也算了。
立即学习“前端免费学习笔记（深入）”；
- 筛选字段时用
querySelectorAll('input:not([type="button"]):not([type="submit"]):not([type="hidden"]), select, textarea')，显式排除干扰项 - IE11 不支持
matches()，若用element.matches('[required]')做条件，得 fallback 到element.hasAttribute('required') - 移动端 safari 对
input[type="date"]的value读取有时延迟，建议在input后加setTimeout(..., 0)再取值，避免取到旧值 - 如果表单用了框架（如 React），直接操作 DOM 可能和虚拟 DOM 冲突，优先用框架提供的 ref 或 state 更新时机来统计
把完成率同步到后端或埋点时要注意什么
别在每次输入后都发请求——用户敲字过程中完成率波动太频繁，既浪费请求，又污染数据。应该节流 + 状态变更触发。
- 用
setTimeout防抖：最后一次输入/失焦后 500ms 再计算并上报，避免高频抖动 - 只在完成率变化时上报（比如从 60% → 80%），而不是每秒轮询
- 上报字段建议包含：
formId（表单唯一标识）、completionRate（整数，如75）、completedFields（数组，存字段name或id）、timestamp - 注意隐私：不要上报字段具体值，尤其敏感字段（身份证、银行卡），完成率本身不包含内容，但字段名若含业务含义（如
idCardNumber），需确认是否符合合规要求
事情说清了就结束。最常出问题的其实是“总有效字段数”的界定——它得随业务逻辑动态变，不是写死的 DOM 数量。