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

当 `` 的 `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"; // 保证值合法，而非 "."   } });

⚠️ 注意事项：

• 不要使用 inputBox.value += “.” —— 即使设置了 step，孤立的小数点（如 “42.”）仍可能被部分浏览器拒绝；
• step=”any” 虽可支持任意精度，但会禁用浏览器内置的上下箭头微调功能，推荐使用 step=”0.001″ 或根据业务需求设定（如货币场景用 step=”0.01″）；
• 若需进一步限制用户手动输入非法字符，建议结合 input 事件做实时过滤（例如阻止字母、多个小数点等），但本方案已确保按钮点击行为绝对安全。

此方法在保留 原生优势（移动端数字键盘、无障碍支持、min/max 约束）的同时，完美解决小数点注入问题，是计算器类应用的生产级实践方案。