前端无法真正过滤用户输入，真实过滤必须由后端完成；input事件是唯一覆盖全部输入路径的监听方式，需在回调中清洗value并手动恢复光标位置，提交前须preventDefault()且服务端必须重新校验。
前端无法真正“过滤”用户输入——只能拦截、清洗、提示，且所有前端操作都可被绕过。真实过滤必须由后端完成。
input 事件是唯一覆盖全部输入路径的监听方式
键盘输入、粘贴、拖放、自动填充、语音输入等，input 事件都能捕获；keydown 捕不到粘贴，change 只在失焦时触发，完全不满足实时性要求。
- 对
<input>和<textarea></textarea>都有效 - 过滤逻辑应写在事件回调里，比如用
replace()清除非预期字符 - 注意赋值后光标跳变：修改
e.target.value后，需手动调用e.target.setSelectionRange()恢复光标位置（尤其中文输入法下） - 别在
input里做复杂正则或大量 DOM 操作，否则滚动/输入会卡顿
pattern 不是过滤器，只是提交前校验提示
pattern 属性只影响 reportValidity() 和原生表单提交时的 UI 提示，它既不阻止输入，也不修改 value。用户粘贴一段含 <script></script> 的文本，pattern="[a-z]+" 完全无效。
-
pattern不支持 Unicode 简写（如\p{Han}），中文得显式写成[\u4e00-\u9fa5] - 移动端可能因
pattern切换键盘类型，但不影响实际输入内容，不能当作限制依据 - 真正要“过滤”，必须监听
input并主动改e.target.value
提交前必须 preventDefault()，否则 JS 过滤白做
哪怕你已经把 input.value 改成干净字符串，只要没在 submit 事件处理函数中调用 event.preventDefault()，浏览器仍会提交原始 DOM 值——前面所有清洗都失效。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
form.addEventListener('submit', handler)，比内联onsubmit="return false"更可控 - 清洗完成后，显式调用
form.submit()触发干净数据提交 - 别直接操作
event.target.elements的引用，应先取节点再改其value或textContent - 多选框（
checkbox）务必统一name并设value，读取时用new FormData(form).getAll('brand')，不是querySelectorAll('input:checked')
最易被忽略的一点：前端清洗永远只是用户体验层的辅助，不是安全边界。恶意请求可跳过页面直接 POST 数据，所以服务端必须重新解析、转义、校验、白名单过滤——哪怕前端已做十遍。
