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
How to give focus() after an alert()?
提问by Jonathan M
I have something like:
我有类似的东西:
<input type="textbox" id="partNumber" onChange="validatePart(this);">
<input type="textbox" id="quantity" onfocus="saveOldQuantity(this);">
The onChange
event is properly firing after a change is made andthe textbox loses focus. When quantity
gains focus, the onfocus
event is properly firing to save the old value of quantity
before changes are made.
onChange
在进行更改并且文本框失去焦点后,事件会正确触发。当quantity
获得焦点时,onfocus
事件会正确触发以保存quantity
更改前的旧值。
If validatePart()
detects an invalid partNumber
value, it alert
s the user to that fact. After the alert()
has cleared, I'd like to return focus to the partNumber
input. 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 partNumber
if 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 partNumber
textbox 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 alert
no matter what is entered into the partNumber
textbox and successfully returns focus back to the partNumber
textbox (even if you tab off it to the quantity
textbox.
这是一个快速的“实时”示例,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();
}