如何在输入框中静态显示单位（如“min”）并仅允许数字输入

本文介绍如何实现输入框内仅允许用户输入数字（如分钟数），同时在视觉上将单位（如“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 标准、可维护性强且用户体验佳的实践方式——让数字归数字，单位归单位，各司其职，浑然一体。