本文介绍如何实现输入框内数字可编辑、单位文字静态显示且不可选中的效果，避免将单位混入输入值，同时确保良好的用户体验与语义化结构。

在表单设计中，常需让用户输入数值（如“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——既保持数据干净，又达成视觉一体化效果。