Firefox浏览器表单输入框onblur事件仅奇数项触发的问题如何修复

修复方案 #

方案1：替换内联事件绑定为全局事件委托（优先推荐） #

不要在每个input标签上单独写onblur属性，统一在表单父元素上绑定事件监听，适配所有表单输入字段，规避浏览器内联事件解析异常。
代码示例：

// 替换#shipping_form为你实际表单的id或父容器选择器
document.querySelector('#shipping_form').addEventListener('focusout', function(e) {
  // 只匹配输入框的失焦事件
  if (e.target.tagName === 'INPUT' && e.target.name) {
    field_check(e.target.name);
  }
})

修改完成后删除所有input标签上的onBlur=field_check("xxx")属性即可。

方案2：修复内联事件写法的兼容性问题 #

如果需要保留内联绑定的写法，做两处调整：

• 把属性名onBlur改为全小写onblur，避免部分浏览器对驼峰属性名的解析异常
• 给所有输入框补充显式的tabindex属性，按表单顺序赋值：

<label for="fname" class="shipping">First Name</label>
<input type="text" class="shipping" name="fname" id="fname" maxlength=24 size=20 placeholder="First Name" autofocus tabindex="1" onblur="field_check('fname')">
<label for="lname" class="shipping">Last Name</label>
<input type="text" class="shipping" name="lname" id="lname" maxlength=48 size=30 placeholder="Last Name" required tabindex="2" onblur="field_check('lname')">

方案3：校验函数逻辑排查 #

检查field_check函数内部是否存在以下异常逻辑：

• 没有对输入参数做非空判断，执行过程中抛出未捕获的错误，导致看起来事件没有触发
• 存在强制操作焦点的逻辑（比如调用focus()方法切回当前字段），覆盖了正常的失焦状态
• 调用了event.stopPropagation()或者return false阻断了事件链，影响后续字段的事件触发

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