如何实现输入框内数字可编辑、单位文本静态显示且不可选中

通过 css 定位与语义化 html 结合，可在输入框右侧“视觉上”嵌入不可编辑的单位（如 “min”），同时确保用户仅能输入数字、光标无法选中单位文本，兼顾可用性与表单语义。

在表单设计中，常需让用户输入数值（如分钟数），同时直观展示单位（如 “min”）。若将单位写入 的 value 属性（如 value="0 min"），不仅破坏数据纯净性，还会导致单位被光标选中、删除或覆盖，影响用户体验和数据可靠性。

推荐方案：分离语义与呈现
使用独立的 元素承载纯数字值，并通过邻近的 或伪元素视觉叠加单位文本。这是最健壮、可访问、易维护的方式：

  
  min

配套 CSS 实现紧凑对齐与隐藏原生控件：

.input-with-unit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.input-with-unit input {
  padding: 6px 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 0;
}

/* 隐藏 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;
}

.unit {
  font-size: 16px;
  color: #666;
  white-space: nowrap;
}

✅ 优势说明：

• 语义清晰： 原生支持 min/max 校验，移动端弹出数字键盘；
• 无障碍友好：配合 aria-label 确保屏幕阅读器正确播报；
• 样式可控：单位文本完全独立，可自由设置字体、颜色、间距；
• 无 JS 依赖：不依赖 JavaScript 即可保证输入范围（0–99）与格式纯净；
• 兼容性强：所有现代浏览器均支持，且降级表现合理（如旧版 IE 可回退为 type="text" + maxlength="2"）。

⚠️ 注意事项：

• 切勿用 value="0 min" 混合内容——这会使表单提交时发送非数字字符串，增加后端解析负担；
• 若必须使用 type="text"（如需兼容极旧环境），请搭配 inputmode="numeric" 和 pattern="[0-9]{1,2}" 提升体验，但校验仍需服务端兜底；
• 避免绝对定位覆盖输入框（如用 position: absolute 将 “min” 叠加在 input 内部）——该方式易导致焦点错位、缩放失准、可访问性失效。

综上，结构分离 + CSS 精确布局是兼顾美观、功能与标准的最佳实践。单位不是输入的一部分，它只是提示；让输入框只做一件事：安全、精准地收集数字。