本文详解如何在 `type="number"` 输入框中通过按钮点击添加小数点，避免值被重置，并兼顾数字格式校验与用户体验。
在构建计算器等需要严格数字输入的 Web 应用时，常会遇到一个典型矛盾：<input type="number"> 能自动过滤非法字符（如字母），但原生不支持手动插入小数点（尤其当当前值为空或为整数时），点击小数点按钮后输入框可能意外清空或忽略 . —— 这是因为浏览器对 number 类型的输入有严格的解析逻辑：若 ., 123., 或 . 等非有效数字字符串被赋给 value，浏览器会将其视作无效值并重置为 ""。
✅ 正确解法：配合 step 属性 + 合法数值追加
关键在于确保每次赋值都构成一个语法有效的数字字符串。仅追加 "." 是非法的（如 "5." 不被 number 输入接受），而 "5.0" 是合法的。因此，应追加 ".0"，并同步设置 step="0.001"（或更小精度）以允许小数输入：
<input type="number" id="inputBox" placeholder="0" step="0.001">
对应 JavaScript 逻辑如下（含健壮性增强）：
const inputBox = document.getElementById("inputBox");
const decimalBtn = document.getElementById("decimal");
decimalBtn.addEventListener("click", () => {
const { value } = inputBox;
// 已存在小数点、输入为空、或末尾已是小数点（如 "123."）则不再添加
if (value.includes(".") || value === "" || value.endsWith(".")) return;
// 确保 step 已设置（兼容动态初始化场景）
if (!inputBox.hasAttribute("step")) {
inputBox.setAttribute("step", "0.001");
}
// 追加 ".0" 而非 "."，保证 value 始终为合法数字字符串
inputBox.value = value + ".0";
});⚠️ 注意事项与最佳实践
- 不要用 type="text" + 正则校验替代：虽可自由插入 .，但需额外监听 input 事件过滤非数字字符（如 /^[0-9.]*$/），且无法阻止粘贴非法内容（如 "abc"），维护成本高。
- step 属性必不可少：若 step="1"（默认），浏览器仅接受整数，"5.0" 会被拒绝；设为 "0.1"、"0.01" 或 "any" 均可，推荐 "0.001" 以支持常用精度。
- 防重复点击：代码中已加入 endsWith(".") 判断，避免生成 "123..0" 等异常。
- 光标定位（进阶）：如需小数点插入后光标位于末尾，可调用 inputBox.focus() 并手动设置 selectionStart/End，但本例中非必需。
✅ 总结
解决 number 输入框小数点插入失败的核心，是尊重其“值必须始终为有效数字”的约束。通过 step 启用小数支持，并以 ".0" 形式追加，既保持了原生数字校验能力，又实现了可控的交互体验——无需放弃语义化，也无需引入复杂验证逻辑。
立即学习“前端免费学习笔记（深入）”；
