如何在数字输入框中安全添加小数点而不清空值-js教程

当 “ 的 `step` 属性未设置时，浏览器会将含小数点的字符串视为无效值并重置输入框；通过动态设置 `step=”0.001″` 并追加 `”.0″` 可兼容原生数字验证，同时避免值丢失。

在构建计算器等需要精确数字输入的界面时，直接对 type=”number” 输入框拼接 “.” 会导致整个 value 被清空——这是因为浏览器默认 step=”1″，仅接受整数格式，一旦值变为 “123.” 这类不完整小数，即被判定为无效并重置为空字符串。

✅ 正确解法是双管齐下：

1. 动态设置 step 属性，明确允许小数精度（如 step=”0.001″ 表示支持三位小数）；
2. 追加 “.0” 而非 “.”，确保输入值始终为合法数字字符串（如 “5.” → “5.0”），避免触发浏览器校验失败。

const inputBox = document.getElementById("inputBox");
const decimalBtn = document.getElementById("decimal");

decimalBtn.addEventListener("click", () => {
  // 防止重复添加小数点
  if (!inputBox.value.includes(".")) {
    inputBox.setAttribute("step", "0.001"); // 关键：启用小数支持
    inputBox.value += ".0"; // 保证值合法，而非 "."
  }
});

⚠️ 注意事项：