JavaScript输入框配置空值自动归0后无法输入识别小数点问题求助

• 实时强制类型转换截断半合法输入：用户输入未完成的带小数点数值（如1.、.）时，代码中e.target.value -= 0的逻辑会将字符串强制转换为数字，"1."会转成1丢失小数点，单独的.会转成NaN导致输入异常。
• 空值即时回填0干扰输入操作：用户清空输入框准备输入新值（如.2、0.5）时，空值判断会立刻将输入框内容替换为0，无法正常输入小数点开头的数值，也无法删除原有内容后输入新值。
• 受控组件值类型不匹配：输入框为text类型，接收字符串格式的value，代码转换为数字存入state后，数字类型渲染为字符串时会自动省略末尾小数点，进一步加剧小数点丢失问题。

核心思路是把输入过程和格式规整逻辑分离，输入时仅保留合法字符串，失焦后再做空值补0、类型转换的操作，修改后代码如下：

// onChange 仅做合法字符校验，保留原始输入字符串，不实时转数字
const updateSettings = (e) => {
  const inputVal = e.target.value;
  // 限制只能输入数字和小数点，可根据业务需求调整校验规则
  if (!/^\d*\.?\d*$/.test(inputVal)) return;

  dispatch({
    type: 'UPDATE_SETTINGS',
    setting: e.target.name,
    value: e.target.type === 'checkbox' ? e.target.checked : inputVal
  })
}

// 新增失焦事件处理，空值补0、合法值转数字存储
const handleBlur = (e) => {
  let val = e.target.value.trim();
  // 空值、仅输入小数点的情况统一设为0
  if (val === '' || val === '.') {
    val = 0;
  } else {
    val = Number(val);
  }
  dispatch({
    type: 'UPDATE_SETTINGS',
    setting: e.target.name,
    value: val
  })
}

// 输入框绑定失焦事件，value统一转字符串避免格式异常
<input 
  type="text" 
  id="amount" 
  name="amount" 
  value={String(settings.amount)} 
  onChange={(e) => updateSettings(e)} 
  onBlur={(e) => handleBlur(e)}
/>

方案优势 #

• 输入阶段不会强制截断内容，允许用户输入半完成的带小数点数值
• 失焦时统一做格式规整，既满足空值自动设为0的需求，也不会干扰正常输入流程
• 存储时依然保留数字类型，不影响后续业务逻辑使用

如果业务不需要自定义输入框样式，也可以直接将input的type设置为number，配合step属性控制小数精度，可进一步简化合法字符校验的逻辑。

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