本文介绍如何实现输入框内数字可编辑、单位文字静态显示且不可选中的效果，避免将单位混入输入值，同时确保良好的用户体验与语义化结构。
在表单设计中，常需让用户输入数值（如“5 分钟”），但又希望单位（如 min）视觉上嵌入输入框右侧、不可编辑、不可被光标选中——这看似是“输入框内混合内容”，实则 不应通过将单位写入 value 属性来实现。因为那样会导致单位参与文本选择、复制、焦点定位，破坏数据纯净性与可访问性。
✅ 推荐方案：语义分离 + 视觉融合
将数字输入控件与单位标签在 DOM 中分离，再通过 CSS 实现视觉上的无缝拼接：
min 配套 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;}? 为什么 不用 ？
- 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 配合实时校验；
- 始终为 添加 aria-label 或关联
综上，“静态单位”不是靠“隐藏光标”或“禁用选择”实现，而是靠结构清晰、职责分明的 HTML + 精准控制的 CSS——既保持数据干净，又达成视觉一体化效果。
