实时同步表单值需用 input 事件监听，因其在中文上屏后触发、兼容多元素类型；须清洗 xss 风险、节流更新防卡顿、区分 checkbox/radio/select[multiple]/file/disabled 等特殊字段状态。
直接把用户刚输的内容映射到页面上，不是靠刷新，也不是靠后端返回——用 input 事件监听就行。关键不是“展示”，而是“实时同步”。
为什么不能只用 change 或 submit 事件
常见错误是只绑 change，结果用户还没失焦就看不到反馈；或者等 submit 才读值，但这时页面可能已跳转或刷新。中文输入法下，keyup 会触发过早（比如拼音阶段就发），而 input 事件在上屏后才触发，更准。它对 textarea、select 同样有效，无需额外判断。
-
form元素本身不冒泡input事件，所以不能在form上统一监听，得单独绑定每个可编辑元素 - 禁用自动聚焦或 autofocus 干扰预览逻辑：如果某个
input默认聚焦，可能触发意外的初始渲染 - 移动端软键盘收起时不会触发
blur→change，但input仍能捕获最终值
如何安全地把表单值渲染进 HTML 预览区
直接 innerHTML = value 有 XSS 风险。必须清洗：只允许 <strong></strong>、<br> 等极少数可信标签，清除零宽字符（如 \u200B），换行符转 <br>。
- 用正则白名单过滤：比如
value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5\s.,!?;:()\-_]/g, '')只留常见字符 - 对
textarea值做value.replace(/\n/g, '<br>')，再套一层textContent渲染更稳妥 - 避免用
document.write()或eval()动态执行字段名——name 属性可能含恶意字符串
多字段同步时怎么避免重排卡顿
每输一个字都更新 DOM，高频触发重排，尤其字段多时明显卡顿。用 requestAnimationFrame 节流是最小代价方案。
- 给每个监听器加节流标记：
let isPending = false;，input触发时只设isPending = true，然后在requestAnimationFrame里批量更新 - 不要在节流回调里反复查
document.getElementById，提前缓存 DOM 引用 - 若字段超过 10 个，考虑用
DocumentFragment拼完再一次性挂载，比逐个innerText更快
预览确认流程中容易漏掉的字段类型
文本框、邮箱、数字这些好处理，但以下几类常被忽略：
-
checkbox和radio：得用el.checked判断是否选中，而不是读value；未选中时值应为undefined或空字符串，别漏判 -
select[multiple]：需遍历el.selectedOptions，取所有.value，不是el.value -
file输入框：浏览器出于安全限制，value只返回文件名（不含路径），且无法读取内容，预览时只能显示"已选择 1 个文件"这类提示 - 带
disabled的字段：默认不提交，但用户可能手动在 DevTools 里启用——预览前建议显式跳过disabled元素，或加警示标识
真正难的不是写渲染逻辑，而是字段状态和 DOM 更新时机的耦合：比如用户快速切换 tab 又切回来，input 事件可能堆积或丢失；又比如表单嵌在 iframe 或 Shadow DOM 里，事件监听范围要重新确认。这些边界情况，比基础实现更耗调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
