onblur表单验证异常求助：焦点跳转与无提示问题

问题根源分析 #

1. 焦点跳转异常：onblur事件触发时，浏览器已经完成了焦点向目标元素的转移，直接调用Num.focus()会被浏览器的默认焦点切换行为覆盖，导致焦点停留在下一个输入框。
2. qty2无提示：原判断逻辑isNaN(parseFloat(x)) && isFinite(x) == false存在逻辑错误，对于部分非数字输入（比如空值、特定字符串）无法正确触发验证提示。

修改后的代码实现 #

JavaScript部分 #

function validatenumber(Num) {
  var x = Num.value.trim(); // 先去除首尾空格，避免空字符干扰判断
  // 修正判断逻辑：输入非空且无法解析为有效数字时触发错误
  if (x !== "" && isNaN(parseFloat(x)) && !isFinite(x)) {
    Num.value = "";
    alert("Not a valid number");
    // 用setTimeout延迟执行focus，避开浏览器默认焦点行为
    setTimeout(() => {
      Num.focus();
    }, 0);
  }
}

HTML部分（保持原结构即可） #

<tr>
  <td>
    <label for="qty1">Full Series: $135.00</label>
  </td>
  <td>
    <input name="qty1" type="text" id="qty1" size="5" onblur="validatenumber(this)"/>
  </td>
</tr>
<tr>
  <td>
    <label for="qty2">Mini-Series: $115.00</label>
  </td>
  <td>
    <input name="qty2" type="text" id="qty2" size="5" onblur="validatenumber(this)"/>
  </td>
</tr>

关键修改点说明 #

• 修正验证逻辑：先清理输入值的首尾空格，仅在输入非空且无法解析为有效数字时触发提示，避免空值或空格导致的误判。
• 延迟焦点设置：通过setTimeout将focus()延迟到当前事件循环结束后执行，确保能覆盖浏览器的默认焦点跳转，让焦点回到当前输入框。
• 简化判断条件：将isFinite(x) == false改为!isFinite(x)，逻辑更简洁直观。

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