本文介绍在 html 表单中优雅实现「仅允许用户编辑数字部分，而单位文本（如 `min`）固定显示在输入框末尾且不可被光标选中或修改」的多种专业方案，涵盖语义化标签选择、css 样式控制及无障碍兼容性要点。
在表单设计中，常需让用户输入数值（如“5 分钟”），同时希望界面简洁——将单位（如 min）视觉上“嵌入”输入框右侧，但又不参与编辑。直接写入 value="0 min" 会导致单位可被选中、删除或覆盖，违背交互直觉。真正健壮的解法是：分离语义与呈现——让输入框只承载可编辑数据，单位文本通过外部元素或伪元素视觉合成。
✅ 推荐方案一：<input type="number"> + 外部 <span>（语义清晰、原生验证）
这是最推荐的做法，兼顾语义、可访问性与浏览器原生能力：
<label for="time">时长：</label> <input type="number" id="time" name="time" min="0" max="99" value="0" step="1" /> <span>min</span>
配合 CSS 消除默认滚动按钮并统一视觉风格：
/* 隐藏 Chrome/Safari/Edge/Opera 的上下箭头 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* 隐藏 Firefox 的 spinner（恢复为纯文本框外观） */
input[type="number"] {
-moz-appearance: textfield;
width: 60px;
padding-right: 8px;
box-sizing: border-box;
}
/* 让单位紧贴输入框，形成视觉整体 */
input[type="number"] + span {
margin-left: -4px; /* 微调对齐 */
padding-left: 4px;
color: #666;
font-size: 0.9em;
}✅ 优势：支持键盘方向键增减、min/max 约束、无障碍读屏正确识别数值；step="1" 确保只接受整数。
✅ 方案二：<input type="text"> + maxlength（轻量灵活）
若需更精细控制（如禁止粘贴非数字内容），可用文本框配合限制：
<input type="text" id="time" maxlength="2" inputmode="numeric" pattern="\d{1,2}" value="0" />
<span>min</span>关键增强点：
- inputmode="numeric"：移动端弹出数字键盘；
- pattern="\d{1,2}"：配合 title 提示可提升表单验证体验；
- JS 辅助过滤（可选）：
document.getElementById('time').addEventListener('input', e => { e.target.value = e.target.value.replace(/\D/g, '').slice(0, 2); });
⚠️ 不推荐方案：用 ::after 伪元素覆盖单位
虽技术上可行（如 input { position: relative; } input::after { content: "min"; position: absolute; right: 8px; }），但存在严重缺陷：
- 伪元素无法被屏幕阅读器识别，损害无障碍；
- 在缩放、高对比度模式下易错位或不可见；
- 用户复制输入内容时会意外包含单位（实际值污染）。
? 总结与最佳实践
| 方案 | 语义性 | 可访问性 | 移动端体验 | 维护成本 |
|---|---|---|---|---|
| type="number" + <span> | ✅ 最佳（明确表示数量） | ✅ 屏幕阅读器正确播报数值 | ✅ inputmode 自动唤起数字键盘 | ⭐ 低 |
| type="text" + JS 过滤 | ✅ 良好 | ✅（需正确设置 aria-label） | ✅ | ⚠️ 中（需防粘贴/拖拽等边界） |
最终建议：优先使用 type="number" 配合外部单位标签，并通过 CSS 实现无缝视觉融合。它无需 JavaScript 即可保证数据合法性，符合 HTML5 语义化原则，且天然兼容各类辅助技术——真正的「简单即强大」。
