用 input 事件实时同步表单值到页面，避免仅用 change 或 submit；多字段时用 requestAnimationFrame 节流减少重排；统一取值用类型映射表；渲染 HTML 需正则清洗仅允许可信标签并清除零宽字符。
表单提交后怎么立刻看到填了啥
直接把用户刚输的内容映射到页面上，不是靠刷新，也不是靠后端返回——用 input、change 和 keyup 事件监听就行。关键不是“展示”，而是“实时同步”。
常见错误是只绑 change，结果用户还没失焦就看不到反馈；或者用 submit 事件才读值，但这时页面可能已跳转或刷新。
-
input事件最稳妥：支持中文输入法上屏后触发，比keyup更准 - 对
textarea和select同样有效，不用额外判断 - 别在
form上监听input——它不冒泡，得单独绑定每个可编辑元素
示例：
document.getElementById('name').addEventListener('input', e => {
document.getElementById('preview-name').textContent = e.target.value;
});
多字段联动预览时 DOM 更新卡顿怎么办
字段一多，每输一个字都改 DOM，浏览器重排压力大，尤其在低端设备上会明显卡。这不是代码逻辑错，是更新太勤。
根本解法不是“优化 DOM 操作”，而是“减少无效更新”：
立即学习“前端免费学习笔记（深入）”；
- 用
requestAnimationFrame节流，把多次输入合并成一次渲染 - 加简单防抖（比如
setTimeout延迟 100ms），但别设太长，否则反馈滞后 - 避免每次都在
innerHTML里拼整个预览块——只更新变动的文本节点
性能影响明显：没节流时，连续输入 10 字可能触发 10 次 layout；加 requestAnimationFrame 后通常压到 1–2 次。
表单含文件/日期/复选框时怎么统一取值
不同控件的值获取方式差异很大，硬写一堆 if 判类型容易漏，后期加新字段也难维护。
推荐用“控件类型映射表”收口：
-
input[type="file"]→ 取files属性，不是value -
input[type="checkbox"]或radio→ 看checked，再读value -
input[type="date"]→ 值是字符串格式"YYYY-MM-DD"，别当成 Date 对象 - 所有控件都优先读
dataset.previewKey这类自定义属性，作为预览区域的 ID 映射依据
这样新增一个开关控件，只要加个 data-preview-key="notify"，逻辑层不用动。
预览内容要保留 HTML 标签怎么办
用户输入带 <b></b> 或换行符，直接 textContent = value 会显示源码；但用 innerHTML = value 又有 XSS 风险。
真要渲染 HTML，必须做最小化清洗：
- 只允许
<br>、<b></b>、<i></i>这几个标签，其余全过滤 - 用正则替换换行符：
value.replace(/\n/g, '<br>')，比white-space: pre-line更可控 - 绝对不要用
DOMPurify.sanitize()这种重型库——就几个标签，手写正则更轻、更确定
容易被忽略的是：富文本粘贴进 textarea 时，会带大量不可见格式字符，建议在 input 事件里先 .replace(/[\u200B-\u200D\uFEFF]/g, '') 清一遍零宽字符。
