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调试窗口交互当然会改变焦点。

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

编辑： 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);
    }
}

Here's a quick "live" example无论输入alert文本框中输入的是什么，都只会触发partNumber并成功将焦点返回到partNumber文本框（即使您将其关闭）到quantity文本框。

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();
}

如何在alert（）之后给出focus（）？

2 个答案: