本文介绍如何实现输入框内数字可编辑、单位文字静态显示且不可选中的效果，避免将单位混入输入值，同时确保良好的用户体验与语义化结构。
在表单设计中，常需让用户输入数值（如“5分钟”），但又希望单位（如 min）视觉上嵌入输入框右侧、不可编辑、不可被光标选中——这看似是“输入框内混合内容”，实则不应通过将单位写入 value 属性来实现。因为那样会导致单位参与文本选择、复制、焦点定位，破坏数据纯净性与可访问性。
✅ 推荐方案：语义分离 + 视觉融合
将数字输入控件与单位标签在 DOM 中分离，再通过 CSS 实现视觉上的无缝拼接：
<div class="input-with-unit">
<input
type="number"
id="time"
min="0"
max="99"
value="0"
aria-label="分钟数"
>
<span class="unit">min</span>
</div>配套 CSS（消除数字输入框的浏览器默认增减按钮，并对齐布局）：
.input-with-unit {
display: inline-flex;
align-items: center;
font-family: system-ui, sans-serif;
}
#time {
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/Opera 的上下箭头 */
#time::-webkit-outer-spin-button,
#time::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* 隐藏 Firefox 的 spinner（恢复为文本框样式） */
#time[type="number"] {
-moz-appearance: textfield;
}
.unit {
padding: 6px 12px 6px 8px;
background: #f5f5f5;
border: 1px solid #ccc;
border-left: none;
border-radius: 0 4px 4px 0;
color: #666;
font-size: 0.95rem;
line-height: 1.4;
}? 为什么不用 <input value="0 min">？
- value="0 min" 会使 " min" 成为可选中、可删除、可粘贴干扰的内容；
- 提交时需额外字符串截取，增加逻辑负担和出错风险；
- 不符合 HTML 表单语义（value 应只含可提交的数据值）；
- 屏幕阅读器会朗读完整字符串（如“0 min”，而非“0”），影响无障碍体验。
? 进阶提示：
- 若需支持小数（如 1.5 min），可设 step="0.1" 并调整 max；
- 使用 type="text" + inputmode="numeric" + pattern="\d{1,2}" 是移动端友好替代方案，但需 JS 配合实时校验；
- 始终为 <input> 添加 aria-label 或关联 <label>，保障可访问性。
综上，“静态单位”不是靠“隐藏光标”或“禁用选择”实现，而是靠结构清晰、职责分明的 HTML + 精准控制的 CSS——既保持数据干净，又达成视觉一体化效果。
