本文介绍两种在 html 文本输入框（``）中阻止用户输入空格的方法：一种是使用现代、推荐的 `oninput` 事件实时过滤空格；另一种是已废弃但曾常用的 `onkeypress` 方式，通过拦截 ascii 码为 32 的按键。
在 Web 表单开发中，常需对用户输入进行约束——例如禁止用户名、邮箱前缀或 ID 字段中出现空格。HTML 原生不提供直接“禁用空格”的属性，但可通过 JavaScript 事件高效实现。以下是两种主流方案，按推荐度与兼容性排序说明：
✅ 推荐方案：oninput 实时清理（非废弃，兼容性强）
该方法在用户每次输入（包括粘贴、拖入、语音输入等）后立即执行正则替换，移除所有空白字符（含空格、制表符、换行符等）。它更健壮，能覆盖 onkeypress 无法捕获的输入场景（如右键粘贴空格）。
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
<input
type="text"
id="username"
name="username"
class="{{ \App\getAllClasses()['text'] }}"
placeholder="Username"
oninput="this.value = this.value.replace(/\s/g, '')"
>? 正则说明：/\s/g 匹配所有 Unicode 空白字符（\s），g 标志确保全局替换。若仅需过滤半角空格，可改用 / /g。
⚠️ 已废弃方案：onkeypress 拦截按键（不推荐用于新项目）
此方式监听按键按下事件，通过判断 event.charCode 是否为 32（空格 ASCII 码）来阻止默认行为。但 charCode 属性自 Chrome 57+ 和 Firefox 未完全支持，且无法拦截粘贴、自动填充、屏幕键盘等非按键输入，MDN 已标记为废弃。
<!-- 不推荐：兼容性差，且无法处理粘贴等操作 -->
<input
type="text"
id="username"
name="username"
class="{{ \App\getAllClasses()['text'] }}"
placeholder="Username"
onkeypress="return event.charCode !== 32"
>? 注意事项与最佳实践
- 服务端校验不可省略：前端限制仅为用户体验优化，恶意用户可绕过 JS。务必在后端再次验证（如 PHP 中使用 str_replace(' ', '', $input) 或正则 /[\s]+/）。
- 用户体验提示：可结合 title 属性或实时反馈（如红色边框 + 提示文字）告知用户“不允许空格”，提升可访问性。
-
扩展需求：如需同时禁用其他字符（如特殊符号），可增强正则，例如：
this.value = this.value.replace(/[\s!@#$%^&*()]/g, '')
- 框架用户注意：若使用 Vue/React，应优先采用响应式绑定（如 Vue 的 v-model + @input 修饰）而非内联事件，以保持逻辑清晰与可测试性。
综上，始终优先选用 oninput 方案——它简洁、可靠、符合现代标准，是当前禁用输入框空格的首选实践。
