点击输入框外部格式化数字：Blur事件绑定失效问题排查

先梳理下你的场景：多个带有InputForcage类的输入框，绑定了blur事件调用OnNumBlur，但点击外部时断点没触发，且已确认JS文件正常加载。下面咱们从几个常见方向逐一排查：

1. 先验证选择器是否真的选中了目标元素 #

这是最容易踩坑的点，先在浏览器控制台执行以下代码，确认返回的集合里包含你的输入框：

// 先简化选择器快速验证
$(".InputForcage")
// 再用你原来的完整选择器验证
$("input[type=text].InputForcage, input[type=number].InputForcage")

• 从你的Razor代码看，@Html.TextBox默认生成type="text"的输入框，所以选择器里的input[type=number].InputForcage其实是多余的，但不会导致匹配失败；
• 确认输入框的class属性：Razor代码里已经指定了InputForcage类，这部分没问题，但还是要通过控制台验证下实际渲染后的DOM元素是否带这个类。

2. 检查事件绑定时机是否正确 #

如果你的JS绑定代码是在DOM完全加载前执行的，此时输入框还没渲染到页面上，绑定自然会失效。解决方法分两种：

方式一：放到DOM就绪事件里 #

把绑定代码包裹在$(document).ready()中，确保DOM渲染完成后再绑定：

$(document).ready(function() {
  $("input.InputForcage").each(function () {
    $(this).blur(function () {
      OnNumBlur(this);
    });
  });
});

方式二：使用事件委托（推荐动态元素场景） #

如果你的输入框是动态显示/隐藏、甚至异步加载的（比如你的代码里有display:none的条件渲染），原来的直接绑定会因为元素重新渲染而丢失。这种情况用事件委托更可靠：

// 绑定到document或更接近的父容器上，监听子元素的blur事件
$(document).on('blur', 'input.InputForcage', function() {
  OnNumBlur(this);
});

事件委托的好处是，不管元素什么时候生成，只要匹配选择器，事件就能触发。

3. 测试是否是绑定方式的问题 #

可以临时在输入框上直接写原生onblur属性，验证OnNumBlur本身是否能正常触发：
修改你的Razor代码：

@Html.TextBox("InputToForce", IsForcage == "True" ? ValForce : "0", new { 
  @class = "mdc-text-field__input number InputForcage", 
  @style = "text-align:right;font-size:14px;", 
  data_id = IdValueLine,
  onblur = "OnNumBlur(this)"
})

如果这样能触发断点，说明问题出在JS绑定的时机或方式上，回到前面的步骤调整即可。

4. 排查是否有事件被阻止 #

检查OnNumBlur函数内部或者其他JS代码，有没有误写event.stopPropagation()或event.preventDefault()，导致blur事件的传播被打断。另外，MDC的text-field组件可能对输入框事件有封装，可以尝试直接在控制台手动触发blur事件：

$(".InputForcage").trigger('blur')

如果手动触发能命中断点，说明事件绑定是正常的，可能是实际操作时blur事件没被触发（比如输入框根本没获得焦点就点击外部，或者点击的元素有特殊的事件拦截逻辑）。

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