表单输入框数字仅显两位小数但保留原值的实现问询

嘿，我完全懂你这个需求的核心——既要给用户展示规整的两位小数，又绝对不能修改原始数据，不然后续计算肯定出乱子。之前用的那些掩码插件踩的坑太典型了，它们直接把输入框的实际值改成了格式化后的字符串，完全没考虑要保留原始数据这回事，难怪会出现134.277变成1342.77这种离谱的错误。

下面给你两种靠谱的实现思路，都是只处理显示层，原始值单独存储：

方案一：用隐藏字段存原始值（适合表单提交场景） #

这种方法最直观，用一个隐藏输入框专门存储用户输入的原始数值，可见的输入框只负责显示格式化后的两位小数。提交表单时，只提交隐藏字段的值即可。

代码示例 #

<!-- 隐藏字段：专门存储原始值，表单提交时用这个 -->
<input type="hidden" id="originalAmount" name="amount">

<!-- 可见字段：用户交互的输入框，只显示格式化后的值 -->
<input type="text" id="displayAmount" placeholder="请输入数字">

const originalInput = document.getElementById('originalAmount');
const displayInput = document.getElementById('displayAmount');

// 监听用户输入，同步原始值并格式化显示
displayInput.addEventListener('input', function(e) {
  const rawValue = e.target.value.trim();
  
  // 验证输入是否为有效数字
  if (!isNaN(rawValue) && rawValue !== '') {
    originalInput.value = rawValue; // 保存原始值
    // 格式化显示为两位小数（自动四舍五入）
    const formattedValue = parseFloat(rawValue).toFixed(2);
    e.target.value = formattedValue;
  } else {
    // 输入无效时清空两个字段
    originalInput.value = '';
    e.target.value = '';
  }
});

// 可选：双击输入框可以查看/编辑原始值（提升用户体验）
displayInput.addEventListener('dblclick', function() {
  this.value = originalInput.value || '';
});

方案二：用dataset存储原始值（无需额外隐藏框） #

如果不想加额外的隐藏字段，可以直接利用HTML元素的dataset属性来存储原始值，同样实现显示与原始值的分离。

代码示例 #

<input type="text" id="numberInput" placeholder="请输入数字" data-original-value="">

const numberInput = document.getElementById('numberInput');

// 监听输入事件，更新原始值并格式化显示
numberInput.addEventListener('input', function(e) {
  const rawValue = e.target.value.trim();
  
  if (!isNaN(rawValue) && rawValue !== '') {
    this.dataset.originalValue = rawValue; // 把原始值存在dataset里
    const formattedValue = parseFloat(rawValue).toFixed(2);
    this.value = formattedValue;
  } else {
    this.dataset.originalValue = '';
    this.value = '';
  }
});

// 表单提交时，获取原始值进行提交
document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认提交，先处理数据
  const originalValue = numberInput.dataset.originalValue;
  console.log('要提交的原始数值：', originalValue);
  
  // 这里写实际的表单提交逻辑，用originalValue作为提交值
});

为什么之前的插件不好用？ #

那些掩码插件的设计逻辑是直接修改输入框的value属性，把格式化后的字符串当成了最终值，完全没考虑“保留原始数据”的需求。而我们的思路是把「用户看到的内容」和「实际要保存的数据」彻底分开，从根源上避免了数据失真的问题。

内容的提问来源于stack exchange，提问作者Pedro Araujo Jorge