如何解决数字输入框失焦后残留末尾小数点的显示不一致问题？

这个问题我之前也碰到过，确实挺闹心的——明明实际值已经是整数了，输入框却还留着个孤零零的小数点，视觉上特别别扭。不管是纯HTML还是React项目里，只要用了带step属性的数字输入框，都容易出现这个情况。

其实原因很简单：浏览器的数字输入框在处理输入时，会默认保留你输入的格式，哪怕你删掉了小数点后面的数字，它也不会自动清理末尾的小数点，觉得你可能还想继续输入小数。但我们可以通过手动处理失焦事件来解决这个视觉不一致的问题。

方案1：纯HTML场景解决办法 #

直接给输入框绑定onblur事件，在失焦时把值转换成数字再转回字符串，这样就能自动去掉末尾的小数点：

<input type="number" step="0.01" onblur="this.value = Number(this.value).toString()">

原理很简单：Number("1.")会被解析成整数1，再转成字符串就是"1"，输入框自然就显示成1了。

方案2：React场景适配（结合你的示例代码修改） #

在你的React组件里，只需要修改onBlur事件的处理逻辑，手动规整输入值即可：

function Example() {
  const [value, setValue] = React.useState('');
  const [focused, setFocused] = React.useState(false);
  
  return (
    <div>
      
      <label>
        Enter a decimal number <br/>(try typing "1.2" then delete the "2" and then lose focus):
       <br/><br/>
        <input
          type="number"
          step="0.01"
          value={value}
          onChange={(e) => {
            console.log("onChange value:", e.target.value);
            setValue(e.target.value);
          }}
          onFocus={() => setFocused(true)}
          onBlur={() => {
            setFocused(false);
            // 处理末尾小数点问题
            if (value) {
              const numValue = Number(value);
              // 如果是整数就显示整数，否则保留两位小数（匹配step=0.01）
              const formattedValue = Number.isInteger(numValue) 
                ? numValue.toString() 
                : numValue.toFixed(2);
              setValue(formattedValue);
            }
          }}
          style={{padding: '5px', margin: '5px 0'}}
        />
      </label>
      
      <div style={{marginTop: '10px'}}>
        <p><strong>Input is currently:</strong> {focused ? 'Focused' : 'Blurred'}</p>
        <p><strong>Value in state:</strong> "{value}"</p>
      </div>
    </div>
  );
}

// Render it
ReactDOM.render(
  <Example />,
  document.getElementById('root')
);

这样修改后，当你输入"1."然后失焦，输入框会自动显示成"1"，同时state里的值也会同步更新，完美解决视觉和实际值不一致的问题。

额外提醒：边界情况处理 #

如果担心用户输入无效内容（比如多个小数点），可以再加个判断，只处理有效的数字：

onBlur={() => {
  setFocused(false);
  if (value) {
    const numValue = Number(value);
    if (!isNaN(numValue)) { // 确保是有效数字再处理
      const formattedValue = Number.isInteger(numValue) 
        ? numValue.toString() 
        : numValue.toFixed(2);
      setValue(formattedValue);
    }
  }
}}

备注：内容来源于stack exchange，提问作者Julian