如何使用JavaScript读取HTML表单输入并分离数字的整数与小数部分

1. 核心实现思路 #

• 优先读取表单输入框的原始字符串值，避免直接转数字触发浮点数精度丢失问题
• 用.作为分隔符拆分字符串，分别提取整数和小数部分
• 按需转换为数字类型即可使用

2. 完整代码示例 #

HTML 表单结构 #

<form id="numberForm">
  <input type="number" id="numInput" step="any" placeholder="请输入数字">
  <button type="submit">提交拆分</button>
</form>
<p>整数部分：<span id="intPart"></span></p>
<p>小数部分：<span id="decimalPart"></span></p>

JavaScript 逻辑代码 #

// 监听表单提交事件
document.getElementById('numberForm').addEventListener('submit', function(e) {
  // 阻止表单默认跳转提交行为
  e.preventDefault();
  // 读取输入框原始字符串值
  const inputValue = document.getElementById('numInput').value.trim();
  
  let intPart, decimalPart;
  if (inputValue.includes('.')) {
    const parts = inputValue.split('.');
    intPart = parts[0];
    // 按示例需求取第一位小数，需要全部小数位直接替换为 parts[1] 即可
    decimalPart = parts[1][0];
    // 若需要转换为数字类型，外层加 Number() 即可：decimalPart = Number(parts[1][0])
  } else {
    intPart = inputValue;
    decimalPart = '0';
  }

  // 输出结果到页面
  document.getElementById('intPart').textContent = intPart;
  document.getElementById('decimalPart').textContent = decimalPart;
})

3. 注意事项 #

• 不要直接将输入值转为Number后做取整/取余运算，类似30.1 % 1的运算会因为浮点数精度问题得到0.09999999999999432的错误结果，用原始字符串拆分是最稳妥的方案
• input 标签加step="any"属性可以解除浏览器默认的小数位数输入限制，支持输入任意小数

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