当 `` 的 `step` 属性未设置时，浏览器会将含小数点的字符串视为无效值并重置输入框；通过动态设置 `step="0.001"` 并追加 `".0"` 可兼容原生数字验证，同时避免值丢失。
在构建计算器等需要精确数字输入的界面时，直接对 type="number" 输入框拼接 "." 会导致整个 value 被清空——这是因为浏览器默认 step="1"，仅接受整数格式，一旦值变为 "123." 这类不完整小数，即被判定为无效并重置为空字符串。
✅ 正确解法是双管齐下：
- 动态设置 step 属性，明确允许小数精度（如 step="0.001" 表示支持三位小数）；
- 追加 ".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 约束）的同时，完美解决小数点注入问题，是计算器类应用的生产级实践方案。
