通过 css 伪元素或结构分离（如 `` + ``）实现单位文本“min”在视觉上嵌入输入框但不参与编辑，同时限制用户仅能输入 0–99 的数字，确保数据准确性和交互简洁性。
在表单设计中，常需让用户输入数值（如“5 min”“30 min”），但又希望单位（如 “min”）仅作视觉提示、不可被光标选中或删除——这既提升界面紧凑性，又避免误操作。直接将单位写入 value 属性（如 value="0 min"）会导致单位可编辑、影响数据提取，且无法用原生约束（如 min/max）校验纯数字部分，因此不推荐。
✅ 最佳实践：语义分离 + 视觉融合
将数字输入与单位文本物理分离，再通过 CSS 实现视觉一体化。推荐使用 <input type="number"> 配合外置 <span>：
<div class="input-with-unit">
<input
type="number"
id="time"
min="0"
max="99"
value="0"
step="1"
>
<span class="unit">min</span>
</div>配套 CSS 消除浏览器默认数字输入的上下箭头，并对齐单位文本：
.input-with-unit {
display: inline-flex;
align-items: center;
gap: 4px;
}
.input-with-unit input {
width: 60px;
padding: 6px 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}
/* 隐藏 Chrome/Safari/Edge/Opera 的旋转按钮 */
.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: 14px;
color: #666;
white-space: nowrap;
}? 为什么不用 type="text" + maxlength="2"？
虽可行（<input type="text" maxlength="2" value="0"/>），但存在明显缺陷：
- ❌ 无法阻止用户粘贴非数字内容（如 "abc" 或 "12.5"）；
- ❌ 缺乏语义化，无障碍支持弱（屏幕阅读器无法识别为数值输入）；
- ❌ 无原生范围校验（需额外 JS 监听 input 事件做正则过滤）。
而 type="number" 天然支持 min/max/step，配合现代 CSS 可完全隐藏控件，兼顾健壮性与体验。
? 进阶提示：若坚持“单位在输入框内”的视觉效果
可使用 CSS ::after 伪元素模拟（需设置 position: relative 和 content），但该方案单位文本不可被选中、不参与 DOM 焦点、不随输入内容滚动，更安全：
.input-inline-unit {
position: relative;
display: inline-block;
}
.input-inline-unit input {
padding-right: 40px; /* 为单位预留空间 */
border: 1px solid #ccc;
}
.input-inline-unit::after {
content: "min";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
color: #666;
pointer-events: none; /* 确保不可点击/选中 */
}⚠️ 注意：伪元素方案中单位仅为装饰，仍需用 type="number" 或 JS 校验保证输入合法性，不可依赖视觉欺骗替代数据约束。
总结：结构清晰优于视觉妥协。用 <input> 承载可验证数值，用 <span> 或伪元素承载静态单位，是兼顾可访问性、可维护性与用户体验的工业级解法。
