如何在alert()之后给予focus()？

Question

我有这样的事情：

<input type="textbox" id="partNumber" onChange="validatePart(this);">
<input type="textbox" id="quantity" onfocus="saveOldQuantity(this);">

onChange 事件在进行更改后正确触发并且文本框失去焦点。当 quantity 获得焦点时，onfocus 事件会正确触发，以在进行更改之前保存 quantity 的旧值。

如果 validatePart() 检测到无效的 partNumber 值，它会提醒用户该事实。清除 alert() 后，我想将焦点返回到 partNumber 输入。但是在输入节点上执行 focus() 并没有给它焦点。这里的调试很棘手，因为 IE 调试窗口交互当然是改变焦点。

如果在 validatePart() 中检测到错误，如何确保焦点返回到 partNumber？

编辑： validatePart() 的简单版本：

function validatePart(node) {
    if (!node.value) {
        alert('Please enter a part number.');
        node.focus();   // <======= why isn't this having any effect??
    }
}

Answer 1

添加一个小的超时并将焦点重置回 partNumber 文本框应该可以解决问题。

因此，您的 validatePart() 函数变得类似于：

function validatePart(node) {
    if (!node.value) {
        alert('Please enter a part number.');
        setTimeout(function(){node.focus();}, 1);
    }
}

这是一个快速的“实时”示例无论在 partNumber 文本框中输入什么内容，都会简单地触发 alert 并成功地将焦点返回到 partNumber 文本框（即使您将其关闭）到数量文本框。

Answer 2

您的代码似乎按我的预期工作。请参阅此fiddle。您还看到其他行为吗？我看到我在 textbox1 中输入了一个数字。然后，当我切换到 textbox2 时，出现 Invalid Part! 错误，并且焦点保留在当前文本框上。

更新 - 由于这似乎只在 Chrome 中运行良好，因此您可以跟踪是否存在错误。如果是的话那就处理一下。

var error = null;
function checkForErrors() { 
   if (error) { error.focus(); error = null; }            
}

function validatePart(node) {
   if (badpart) { error = node; }
}

function saveOldQuantity(node) {
   checkForErrors();
}