实现带单位的number输入框聚焦交互及本地化格式兼容方案

嘿，我刚好解决过类似的需求！你的问题核心是既要保留input[type=number]的原生优势，又要实现单位的动态显示效果，之前的两种方案确实都有各自的痛点——第一种DOM替换会导致本地化显示不一致，第二种宽度计算跨浏览器太麻烦。我给你一个更优雅的方案，用CSS定位+少量JS就能搞定，完全避开这些问题：

核心思路 #

不用替换输入框也不用计算宽度，我们靠CSS定位和状态切换实现效果：

• 用容器包裹输入框和单位元素，单位默认定位在输入框内部右侧
• 输入框失焦时，通过调整输入框padding让数值紧贴单位，视觉上融为一体
• 输入框聚焦时，恢复右侧padding给单位留出空间，确保输入内容不会被遮挡
• 全程保留input[type=number]的所有原生特性：验证规则、数字键盘、本地化格式处理

完整实现代码 #

HTML

<div class="unit-input-container">
  <input type="number" class="unit-input" min="0" max="100" step="0.1" value="3.3" data-unit="kg">
  <span class="unit-label"></span>
</div>

CSS

/* 移除number输入框的默认增减按钮 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.unit-input-container {
  position: relative;
  display: inline-block;
  border: 2px solid #dadada;
  background-color: #fff;
}

.unit-input {
  font-family: sans-serif;
  font-size: 26px;
  padding: 5px 30px 5px 5px; /* 聚焦时给单位留空间 */
  border: none;
  outline: none;
  width: 120px;
  box-sizing: border-box;
  transition: padding 0.2s;
}

.unit-label {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-family: sans-serif;
  font-size: 26px;
  color: #333;
  pointer-events: none; /* 点击单位不会干扰输入框聚焦 */
}

/* 失焦状态：数值紧贴单位，视觉上融为一体 */
.unit-input:not(:focus) {
  padding-right: 5px;
}

JS

// 初始化单位文本
document.querySelectorAll('.unit-input').forEach(input => {
  const unit = input.dataset.unit;
  input.nextElementSibling.textContent = unit;
});

// 可选：失焦时自动格式化数值（匹配step的小数位数，兼容本地化）
document.querySelectorAll('.unit-input').forEach(input => {
  input.addEventListener('blur', () => {
    if (!input.value) return;
    // 利用原生number输入框的特性，自动处理小数点/逗号的本地化转换
    const decimalPlaces = input.step.split('.')[1]?.length || 0;
    input.value = parseFloat(input.value).toFixed(decimalPlaces);
  });
});

方案优势 #

1. 完全保留原生特性：min/max/step验证、移动端数字键盘、Chrome等浏览器的本地化小数点/逗号处理都能正常工作
2. 无DOM替换/宽度计算：靠CSS定位实现，跨浏览器兼容性好，不会出现显示不一致的问题
3. 交互流畅：单位元素设置了pointer-events: none，点击单位区域会自动聚焦输入框，体验自然
4. 可扩展性强：支持动态修改单位（只需更新data-unit属性并重新初始化），也能根据单位长度调整输入框宽度和padding值

内容的提问来源于stack exchange，提问作者LocalHorst