最直接有效拦截空格键的方法是在onkeydown阶段通过event.code === 'space'返回false；oninput正则替换仅作兜底，无法阻止输入行为，且存在光标跳动、ime失焦等问题；服务端仍需校验清理。
onkeydown 拦截空格键最直接有效
空格键的键码是 32，在 onkeydown 阶段就能拦截，比 oninput 或 onchange 更早、更可靠。用户按下空格时，事件还没触发输入行为，此时 return false 或 event.preventDefault() 就能彻底阻止。
常见错误是用 oninput + 正则替换，比如 value = value.replace(/\s/g, '') —— 这会导致光标跳到末尾、中文输入法下失焦、粘贴空格后才清理，体验极差。
实操建议：
- 优先用
onkeydown="return event.keyCode !== 32"（兼容 IE9+） - 现代写法推荐
onkeydown="if (event.code === 'Space') return false"，event.code更语义化，不受键盘布局影响 - 若需同时禁用其他空白字符（如 Tab、Enter），可扩展判断：
if (['Space', 'Tab', 'Enter'].includes(event.code)) return false
正则过滤只适合 oninput 场景下的兜底处理
正则本身不能“禁止”输入，只能做事后清洗。它唯一合理用途是：防漏——比如用户右键粘贴含空格的文本，或绕过键盘限制通过开发者工具修改 DOM。
注意 \s 匹配所有 Unicode 空白符（包括全角空格、NBSP 、换行符等），而 （空格字符）只匹配 ASCII 空格。多数场景应选 \s。
示例（内联写法，避免污染全局）：
<input oninput="this.value = this.value.replace(/\s/g, '')">
但必须搭配 onkeydown 使用，否则粘贴、IME 输入仍会短暂出现空格。
input type="search" 和 type="text" 行为一致，无需特殊处理
浏览器对 type="search" 的空格处理和 type="text" 完全相同，不会自动 trim 或忽略。某些人误以为 search 类型自带空格过滤，实际只是样式和默认清空按钮不同。
验证方式：在任意 <input type="search"> 中按空格，值照样会变；提交表单时，空格照常发送。
所以不要依赖类型差异，统一用 onkeydown + oninput 组合控制。
移动端软键盘空格键同样触发 keydown，但部分输入法有例外
iOS Safari 和 Android Chrome 均支持 event.code === 'Space'，主流拼音/五笔输入法在「非组合状态」下按空格（如选词确认）也会触发。但某些输入法在「正在输入拼音过程中」按空格，可能不触发 keydown（直接上屏候选词），此时仅靠前端拦截会失效。
真正保险的做法是服务端也校验：接收时用 trim() + replace(/\s+/g, '') 清理，尤其涉及用户名、密码、搜索关键词等字段。
前端能拦住 95% 的空格输入，但别把它当成唯一防线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
