验证失败时Alert弹窗无法关闭的技术问题求助

核心问题 #

你的Alert弹窗无法关闭，是因为在blur事件触发的验证逻辑中，同步调用numField.focus()与alert弹窗的UI阻塞产生了冲突。当alert弹出后，浏览器UI线程被阻塞，用户点击关闭后立即执行focus()，会导致浏览器焦点状态混乱，进而无法正常关闭弹窗。另外还有两处小问题需要修正：

具体问题点 #

1. 输入值未转换为数字：numField.value是字符串类型，直接和数字比较会出现非预期结果（比如输入"abc"时，NaN < 1为false，不会触发验证）。
2. getMessage函数参数冗余：调用getMessage()时未传参，但函数定义写了numField参数，属于无效代码。
3. 同步调用focus()导致UI冲突：在alert弹窗关闭前就执行focus()，干扰浏览器的焦点处理逻辑。

修正后的代码 #

<!DOCTYPE html>
<html>
<head>
<script>

function checkNumber(numField) {
    // 转换为数字，处理空值或非数字情况
    var num = parseFloat(numField.value);
    // 验证：数字有效且大于等于1
    if(isNaN(num) || num < 1) {
        getMessage();
        // 延迟调用focus，让alert先正常关闭
        setTimeout(() => {
            numField.focus();
        }, 10);
        return false;
    }
    return true;
}

// 移除冗余参数
function getMessage() {
    alert("Not a valid number. Accepts only positive numbers greater than or equal to 1");
}

function setTabOut() {
  document.forms[0].elements['taboutFlag'].value = "true";
}

</script>
</head>
<body>

<form>
    <p id="demo"></p>

    <input type="text" name="username" onblur="setTabOut();return checkNumber(this);" />

    <INPUT type="hidden" name="taboutFlag" />
</form>
</body>
</html>

关键修正说明 #

• 数字转换与验证：用parseFloat将输入值转为数字，并用isNaN判断是否为有效数字，确保非数字输入也能触发验证提示。
• 延迟聚焦：通过setTimeout延迟10ms调用focus()，让alert弹窗先完成关闭流程，避免焦点操作干扰UI线程。
• 清理无效参数：移除getMessage函数的冗余参数，避免代码歧义。

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