通过 css 定位与语义化 html 结合，可在输入框右侧“视觉上”嵌入不可编辑的单位（如 “min”），同时确保用户仅能输入数字、光标无法选中单位文本，兼顾可用性与表单语义。
在表单设计中，常需让用户输入数值（如分钟数），同时直观展示单位（如 “min”）。若将单位写入 <input> 的 value 属性（如 value="0 min"），不仅破坏数据纯净性，还会导致单位被光标选中、删除或覆盖，影响用户体验和数据可靠性。
推荐方案：分离语义与呈现
使用独立的 <input> 元素承载纯数字值，并通过邻近的 <span> 或伪元素视觉叠加单位文本。这是最健壮、可访问、易维护的方式：
<div class="input-with-unit">
<input
type="number"
id="time"
name="minutes"
min="0"
max="99"
value="0"
aria-label="Minutes"
/>
<span class="unit">min</span>
</div>配套 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;
}✅ 优势说明：
- 语义清晰：<input type="number"> 原生支持 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 精确布局是兼顾美观、功能与标准的最佳实践。单位不是输入的一部分，它只是提示；让输入框只做一件事：安全、精准地收集数字。
