jQuery实现金额输入框失焦追加.00：点击其他输入框无响应问题

你之前的代码依赖点击document的事件来处理，这就导致切换到其他输入框时因为事件冒泡被阻止而失效——其实我们应该直接监听输入框失去焦点的事件，这才是最贴合需求的触发时机。而且因为是动态添加的输入框，必须用事件委托来确保新添加的元素也能生效。

优化后的代码 #

// 用事件委托监听所有.money-input的focusout事件（支持动态新增的输入框）
$(document).on("focusout", ".money-input", function() {
    const inputVal = $(this).val().trim();
    // 只处理非空、且没有.00、也没有其他小数位的情况
    if (inputVal && !inputVal.includes(".00") && !inputVal.includes(".")) {
        $(this).val(inputVal + ".00");
    }
});

为什么这个方案可行？ #

• focusout事件：不管你是点击页面空白区域，还是切换到其他输入框，只要当前输入框失去焦点就会触发，完全覆盖你的需求场景。
• 事件委托：绑定在document上，后续动态添加的.money-input元素自动继承这个事件监听，不用每次加新输入框都重新写绑定代码。
• 更严谨的判断：加上trim()避免空格干扰，同时排除了用户已经输入小数的情况（比如输入15.6就不需要追加.00了）。
• 可以删掉你原来写的$(".money-input").on("click", ...)那段代码，现在完全用不上了。

额外升级：支持自动补全两位小数 #

如果想让输入框更智能——比如用户输入12.3自动变成12.30，输入12.345自动四舍五入成12.35，可以用这个版本：

$(document).on("focusout", ".money-input", function() {
    const inputVal = $(this).val().trim();
    if (!inputVal) return;

    const num = parseFloat(inputVal);
    // 确保输入的是有效数字再处理
    if (!isNaN(num)) {
        $(this).val(num.toFixed(2));
    }
});

这个版本兼容性更强，不管用户输入整数还是带小数的数字，都会自动格式化为两位小数的金额格式。

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