为何向<input type="number">添加小数点会清空输入框？

为什么点击小数点按钮会清空输入框？ #

因为<input type="number">对通过JavaScript直接赋值的value有严格的格式校验：像"3."这种末尾带小数点但后续无数字的字符串，不属于有效的数值格式，浏览器判定值无效后，会自动清空输入框或者重置为初始状态。

而手动输入小数点时，浏览器允许这种“未完成的中间状态”（比如刚输入小数点还没输数字），这是浏览器针对用户实时输入做的特殊兼容，但通过JS直接赋值时不会触发这个兼容逻辑，只会严格校验值的有效性。

解决办法 #

方案1：改用type="text"并自行校验格式

把输入框类型改成text，同时加上inputmode="numeric"让移动端弹出数字键盘，这样就能完全控制输入内容，包括末尾的小数点：

<input id="input" type="text" inputmode="numeric" value="3">
<div id="2">click to add 2</div>
<div id=".">click to add .</div>

document.getElementById('2').onclick = () => document.getElementById('input').value += '2';
document.getElementById('.').onclick = () => {
  const input = document.getElementById('input');
  if (!input.value.includes('.')) {
    input.value += '.';
  }
};

如果需要确保最终输入是有效数字，可以在提交或使用值的时候做校验：

const value = document.getElementById('input').value;
if (!isNaN(parseFloat(value)) && isFinite(value)) {
  // 处理有效数字逻辑
}

方案2：保留type="number"，用临时变量维护输入状态

如果一定要用type="number"，可以用一个变量保存用户输入的完整字符串，只把有效的数值部分同步到输入框，等用户输入小数点后的数字再更新：

let inputValue = '3'; // 临时变量保存输入状态
const input = document.getElementById('input');
input.value = inputValue;

document.getElementById('2').onclick = () => {
  inputValue += '2';
  input.value = inputValue;
};

document.getElementById('.').onclick = () => {
  if (!inputValue.includes('.')) {
    inputValue += '.';
    // 此时不直接赋值给input.value，等后续输入数字后再同步
  }
};

// 示例：点击数字0时同步完整有效数值
document.getElementById('0').onclick = () => {
  inputValue += '0';
  input.value = inputValue; // "3.0"是有效数值，可正常显示
};

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