如何实现输入框内数字可编辑、单位文字静态显示且不可选中

聖光之護 2025-12-29 00:00:00 次阅读

通过 css 伪元素或结构分离（如 `` + ``）实现单位文本“min”在视觉上嵌入输入框但不参与编辑，同时限制用户仅能输入 0–99 的数字，确保数据准确性和交互简洁性。

在表单设计中，常需让用户输入数值（如“5 min”“30 min”），但又希望单位（如 “min”）仅作视觉提示、不可被光标选中或删除——这既提升界面紧凑性，又避免误操作。直接将单位写入 value 属性（如 value="0 min"）会导致单位可编辑、影响数据提取，且无法用原生约束（如 min/max）校验纯数字部分，因此不推荐。

✅ 最佳实践：语义分离 + 视觉融合
将数字输入与单位文本物理分离，再通过 CSS 实现视觉一体化。推荐使用配合外置：

min

配套 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"？
虽可行（），但存在明显缺陷：

❌ 无法阻止用户粘贴非数字内容（如 "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; /* 确保不可点击/选中 */
}