oninput + replace(/\s/g, '') 是最稳的实时清理方案，它在每次输入（含粘贴、语音输入等）后立即清除所有空白符，兼容性强且用户几乎感觉不到空格被输入；但直接赋值会导致光标跳至末尾，需额外处理光标位置。
oninput + replace(/\s/g, '') 是最稳的实时清理方案
想让用户“感觉不到空格被输进去”，oninput 配合 replace(/\s/g, '') 是当前兼容性最好、行为最可控的做法。它在每次输入（包括粘贴、IME 上屏、自动补全）后立即执行，比 onkeyup 或 onkeypress 更全面。
-
onchange不行——只在失焦时触发，完全起不到“禁止”效果 -
onkeyup有漏：无法拦截粘贴、语音输入、剪贴板拖入等非按键操作 -
replace(/\s/g, '')清的是所有空白符（空格、制表符、换行、全角空格等），如只需干掉半角空格，改用replace(/ /g, '') - 直接赋值
this.value = ...会导致光标跳到末尾；若需保留编辑位置，得额外保存/恢复selectionStart
示例：<input type="text" oninput="this.value = this.value.replace(/\s/g, '')">
pattern="\S+" 只校验不拦截，适合轻量级场景
pattern 属性本质是提交前校验，不是输入控制。它只在 form.submit() 或调用 checkValidity() 时生效，用户照样能输入、粘贴、编辑含空格的内容，直到点提交才弹提示。
- 正则必须用
^和$包裹（浏览器自动加），所以写\S+即表示“整个字符串不能含空白字符且至少一个非空白字符” - 必须配
title属性，否则 Chrome/Firefox 不显示错误提示文本 - 对粘贴进来的空格、首尾空格、连续空格全部无感，纯靠用户试错
- 移动端软键盘回车键可能绕过校验（尤其 Safari），不能依赖它做唯一防线
示例：<input type="text" pattern="\S+" title="不能包含空格" required>
onkeypress event.which === 32 已不推荐
用 onkeypress 拦截 ASCII 码 32 的空格键，看似直接，但实际问题一堆：
-
event.charCode和event.which在现代浏览器（Chrome ≥120、Firefox ≥115）中已被标记为 deprecated，部分新版 WebView 直接不支持 - 完全无法处理粘贴（Ctrl+V）、拖放文本、语音输入、IME 组词上屏等非按键路径
- iOS Safari 对该事件的触发时机和 keyCode 映射不稳定，常出现漏拦或误拦
- 用户按住空格键重复输入时，部分浏览器会跳过后续事件，导致“卡顿式允许”
示例（勿用）：<input type="text" onkeypress="return event.which !== 32">
后端必须清洗，且要防全角空格
前端所有限制都可被绕过——禁用 JS、手动改 DOM、curl 提交、Postman 构造请求……所以后端校验不是“补充”，而是底线。
- 不能只 trim() 或 replace(/ /g)，要处理全角空格（U+3000）、不间断空格（U+00A0）、零宽空格（U+200B）等 Unicode 空白符
- 建议用正则
/[\s\u3000\u00A0\u2000-\u200B\u2028\u2029]/g全面匹配常见空白字符 - 若字段用于数据库查询或文件名生成，还需考虑路径分隔符、控制字符等，空格只是冰山一角
- 前后端空格处理逻辑应尽量一致，避免“前端删了，后端又报错”这类体验断层
真正难的从来不是怎么删空格，而是删完之后——光标在哪、粘贴是否被截断、全角空格是否混进去了、后端有没有同步兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
