如何在JavaScript中实现小数点动态移位的输入功能？

核心逻辑 #

本质就是把用户输入的所有数字拼接成整数，再除以100，最终固定显示两位小数。比如输入序列2→3→5，拼接成235，除以100就是2.35；输入12345直接得到12345/100=123.45，完全符合需求。

代码实现（HTML + JavaScript） #

<!-- 输入框和显示区域 -->
<input type="text" id="digitInput" placeholder="逐位输入数字">
<div id="result">0.00</div>

<script>
// 存储用户输入的所有数字字符串
let inputStr = '';
const resultEl = document.getElementById('result');
const inputEl = document.getElementById('digitInput');

// 处理输入事件：过滤非数字，更新显示
inputEl.addEventListener('input', function(e) {
  // 只保留输入的数字字符
  const validDigits = e.target.value.replace(/\D/g, '');
  if (validDigits) {
    inputStr += validDigits;
    // 清空输入框，方便继续输入下一位
    e.target.value = '';
    // 计算并格式化结果
    const finalValue = parseInt(inputStr) / 100;
    resultEl.textContent = finalValue.toFixed(2);
  }
});

// 支持退格删除功能
inputEl.addEventListener('keydown', function(e) {
  if (e.key === 'Backspace' && inputStr.length > 0) {
    // 去掉最后一位数字
    inputStr = inputStr.slice(0, -1);
    // 计算结果，空的话显示0.00
    const finalValue = inputStr ? parseInt(inputStr) / 100 : 0;
    resultEl.textContent = finalValue.toFixed(2);
  }
});
</script>

逻辑说明 #

1. 用inputStr变量记录用户输入的所有数字拼接成的字符串，避免浮点数精度问题
2. 输入事件触发时，自动过滤非数字字符，只保留有效数字追加到inputStr
3. 每次更新后将拼接的数字转为整数，除以100后用toFixed(2)强制保留两位小数，确保显示格式统一
4. 退格键处理：删除inputStr的最后一位，重新计算显示值，为空时恢复初始的0.00

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