HTML5如何将数值格式化为2位小数并给输入框加左侧固定$符号

以下方案可以同时满足你提到的两项需求，所有代码可直接替换原有逻辑使用：

完整实现代码 #

<p>
  <label>
    你计划筹集的总金额是多少？
    <div class="amount-input-wrapper">
      <span class="dollar-sign">$</span>
      <input type="number" placeholder="请输入目标金额" min="1" step="0.01" name="target">
    </div>
  </label>
</p>

<style>
/* 输入框外层容器，用于定位$符号 */
.amount-input-wrapper {
  position: relative;
  display: inline-block;
  margin-top: 8px;
}
/* 悬浮$符号样式 */
.dollar-sign {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  /* 关键属性：完全不响应鼠标事件，不会干扰输入操作 */
  pointer-events: none;
  font-size: 16px;
}
/* 输入框内边距调整，避免输入内容和$符号重叠 */
.amount-input-wrapper input {
  padding-left: 22px;
  height: 32px;
  font-size: 16px;
}
</style>

<script>
const amountInput = document.querySelector('input[name="target"]');

// 实时监听输入，强制仅保留两位小数
amountInput.addEventListener('input', function(e) {
  let value = e.target.value;
  // 过滤所有非数字、非小数点的非法字符
  value = value.replace(/[^0-9.]/g, '');
  // 仅保留第一个小数点，后面多余的小数点自动忽略
  const firstDotIndex = value.indexOf('.');
  if (firstDotIndex !== -1) {
    // 小数点后最多保留2位
    value = value.slice(0, firstDotIndex + 3);
  }
  e.target.value = value;
});

// 失焦时自动补全两位小数格式
amountInput.addEventListener('blur', function(e) {
  const value = parseFloat(e.target.value);
  if (!isNaN(value)) {
    e.target.value = value.toFixed(2);
  }
});
</script>

核心特性说明 #

• $符号采用绝对定位实现悬浮效果，配合pointer-events: none属性，完全不会拦截输入操作，点击$符号所在区域等价于直接点击输入框
• 输入实时校验逻辑自动过滤非法字符，强制限制最多输入两位小数，从源头避免用户输入不符合格式的内容
• 失焦自动补全两位小数，即使用户输入整数也会自动转换为两位小数格式，保证提交的数值格式统一

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