Javascript 如何在警报()之后给予焦点()?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7234190/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 01:25:49  来源:igfitidea点击:

How to give focus() after an alert()?

javascripthtmleventsfocus

提问by Jonathan M

I have something like:

我有类似的东西:

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

The onChangeevent is properly firing after a change is made andthe textbox loses focus. When quantitygains focus, the onfocusevent is properly firing to save the old value of quantitybefore changes are made.

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

If validatePart()detects an invalid partNumbervalue, it alerts the user to that fact. After the alert()has cleared, I'd like to return focus to the partNumberinput. But doing a focus()on the input node is not giving it focus. Debugging is tricky here, because the IE debug window interaction is, of course, changing the focus.

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

How can I ensure focus returns to partNumberif an error is detected in validatePart()?

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

EDIT: A simple version of validatePart():

编辑:一个简单的版本validatePart()

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

回答by CraigTP

Adding a small timeout and resetting the focus back to the partNumbertextbox should do the trick.

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

Thus your validatePart()function becomes something like:

因此,您的validatePart()功能变得类似于:

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

Here's a quick "live" examplethat simply fires an alertno matter what is entered into the partNumbertextbox and successfully returns focus back to the partNumbertextbox (even if you tab off it to the quantitytextbox.

这是一个快速的“实时”示例alert无论在partNumber文本框中输入什么内容,它都会触发并成功地将焦点返回到partNumber文本框(即使您将它移到quantity文本框。

回答by mrtsherman

Your code seems to work as expected for me. See this fiddle. Are you seeing some other behavior? I see that I type a number in textbox1. Then when I tab over to textbox2 I get Invalid Part!error and focus stays on current textbox.

您的代码似乎对我来说按预期工作。看到这个小提琴。你看到其他一些行为了吗?我看到我在 textbox1 中输入了一个数字。然后,当我切换到 textbox2 时,Invalid Part!出现错误并且焦点停留在当前文本框上。

Updated - Since this only seems to play nice in Chrome you could keep track of whether an error exists. If so then handle it.

更新 - 由于这似乎只在 Chrome 中运行良好,您可以跟踪是否存在错误。如果是,那么处理它。

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

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

function saveOldQuantity(node) {
   checkForErrors();
}