本文介绍如何实现输入框内仅允许用户输入数字（如分钟数），同时在视觉上将单位（如“min”）固定显示在右侧且不可编辑、不可选中，兼顾用户体验与数据准确性。
在表单设计中，常需让用户输入带单位的数值（例如“5 min”“30 sec”），但若将单位直接写入 的 value 属性（如 value="0 min"），会导致单位可被光标选中、删除或覆盖，破坏语义和交互逻辑。真正健壮的方案是：分离“可编辑数值”与“静态单位显示”，通过 HTML 结构 + CSS 样式协同实现视觉一体化效果。
✅ 推荐方案：语义化结构 + 样式融合
使用 管理纯数字输入，并用 紧邻显示单位，再通过 CSS 实现无缝拼接：
min
配套 CSS（消除浏览器默认样式，统一视觉）：
.input-with-unit {
display: inline-flex;
align-items: center;
font-family: system-ui, -apple-system, sans-serif;
}
.input-with-unit input {
margin: 0;
padding: 6px 8px 6px 12px;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
outline: none;
font-size: 1rem;
}
/* 隐藏 Chrome/Safari/Edge 的上下箭头 */
.input-with-unit input::-webkit-outer-spin-button,
.input-with-unit input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox 兼容：显示为文本框样式 */
.input-with-unit input[type="number"] {
-moz-appearance: textfield;
}
.input-with-unit .unit {
padding: 6px 12px 6px 4px;
background: #f5f5f5;
border: 1px solid #ccc;
border-left: none;
border-radius: 0 4px 4px 0;
color: #666;
font-size: 0.95rem;
line-height: 1;
}✅ 优势说明： 数值受 min/max/step 原生约束，无需 JavaScript 校验； 单位完全不可编辑、不可选中、无障碍友好（aria-label 明确语义）； 响应式友好，支持键盘导航与屏幕阅读器； 兼容所有现代浏览器，无 hack 风险。
⚠️ 替代方案对比（不推荐）
- + maxlength="2"：虽可限制长度，但无法阻止输入字母（如 "ab"），仍需 JS 或 pattern 配合，语义弱于 number；
- CSS ::after 伪元素覆盖单位：单位非真实 DOM 节点，无法被屏幕阅读器识别，且光标可能误入伪元素区域，影响可访问性；
- value="0 min" + JS 阻止光标进入后缀：逻辑复杂、易出 Bug，且违反表单控件单一职责原则。
? 进阶提示
- 若需支持小数（如 1.5 min），可设 step="0.1" 并调整 max（如 max="99.9"）；
- 移动端建议添加 inputmode="numeric" 提升软键盘体验：
- 如需动态单位（如“min”/“sec”切换），只需 JS 控制 .unit 文本内容，不影响输入逻辑。
综上，“结构分离、样式融合”是最符合 Web 标准、可维护性强且用户体验佳的实践方式——让数字归数字，单位归单位，各司其职，浑然一体。
