如何在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告知用户该事实。在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文本框(即使您将其选项卡关闭到quantity文本框)。

Answer 2

您的代码似乎为我预期的工作。看这把小提琴。你有没有看到其他的行为?我看到我在textbox1中输入了一个数字。然后，当我tab over到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();
}