如何实现输入框实时保持两位小数格式（仿ATM机效果）

这个ATM机常见的实时金额格式化效果，完全可以用HTML + JavaScript实现，不需要额外技术栈。

需求回顾 #

假设目标输入值为112.56，输入过程的实时格式变化要求：

• 输入1 → 显示1.00
• 再次输入1 → 显示11.00
• 输入2 → 显示112.00
• 输入. → 仍显示112.00
• 输入5 → 显示112.50
• 输入6 → 显示112.56

实现代码 #

HTML结构

<input type="text" id="atmInput" placeholder="输入金额" />

JavaScript逻辑

const input = document.getElementById('atmInput');
let rawDigits = ''; // 存储用户输入的所有有效数字

// 监听输入事件，实时格式化
input.addEventListener('input', function(e) {
  const inputValue = e.target.value;
  // 仅保留输入中的数字，过滤小数点及其他非数字字符
  const newDigits = inputValue.replace(/[^0-9]/g, '');
  
  rawDigits = newDigits;
  
  if (rawDigits.length === 0) {
    e.target.value = '';
    return;
  }
  
  // 将数字视为"分"单位，转为"元"并保留两位小数
  const formattedAmount = (parseInt(rawDigits, 10) / 100).toFixed(2);
  e.target.value = formattedAmount;
});

// 光标位置优化：聚焦时光标定位到整数部分末尾，提升输入体验
input.addEventListener('focus', function() {
  if (this.value) {
    const cursorPosition = this.value.length - 3;
    this.setSelectionRange(cursorPosition, cursorPosition);
  }
});

代码说明 #

1. 核心逻辑：用rawDigits收集用户输入的所有数字，忽略小数点（因为需求中输入小数点不改变显示，仅作为输入小数位的提示），之后将数字序列视为"分"，除以100转为"元"，通过toFixed(2)强制保留两位小数，实现实时格式化。
2. 光标优化：聚焦时自动将光标定位到整数部分末尾，避免格式化后光标跳到输入框最后，让输入流程更符合用户直觉。

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