Javascript - 在警报消息后设置焦点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21235483/
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
Javascript - set focus after alert message
提问by Tiz
I'm tryng to focus on the same element when validation fail. Here's my HTML code :
当验证失败时，我试图专注于相同的元素。这是我的 HTML 代码：
<input
id="potatoes" name="potatoes" value="" type="text" class="tooltip"
onblur="Validate('potatoes')" autocomplete='off'>
<input
id="potatoes" name="potatoes" value="" type="text" class="tooltip"
onblur="Validate('potatoes')" autocomplete='off'>
and here's my javascript code :
这是我的 javascript 代码：
function Validate(id) {
var errors = {
potatoes : 'enter potatoes',
hamburgers : 'enter'
};
if (document.getElementById(id).value === '') {
if (id in errors) {
alert(errors[id]);
//setTimeout(function(){document.getElementById(id).focus();}, 1);
}
}
}
}
I've tried to set focus using .focus() method but it doesn't work. I've read that it might depend on "onblur" in HTML, when I call my function Validate(), so i've tried to change it but nothing worked till now.
我尝试使用 .focus() 方法设置焦点，但它不起作用。我读过它可能取决于 HTML 中的“onblur”，当我调用我的函数 Validate() 时，所以我试图改变它，但到目前为止没有任何效果。
回答by Alvise Susmel
There is a problem here. This code is going in loop. When 'focus' is triggered, the function Validate is called again, showing another alert dialog.
这里有问题。这段代码正在循环中。当“焦点”被触发时，再次调用函数验证，显示另一个警报对话框。
That's a working code
这是一个工作代码
HTML
HTML
<input id="potatoes" name="potatoes" value="" type="text" class="tooltip" onblur="Validate(this)" autocomplete='off'>
<input id="potatoes" name="potatoes" value="" type="text" class="tooltip" onblur="Validate(this)" autocomplete='off'>
Javascript
Javascript
var validating = false; //<-- IMPORTANT
function Validate(element) {
var id = element.id;
var errors = {
potatoes : 'enter potatoes',
hamburgers : 'enter'
};
if (document.getElementById(id).value === '') {
if (id in errors) {
if(validating == false) {
validating = true
alert(errors[id]);
setTimeout(function(){
document.getElementById(id).focus();
validating = false;
}, 1);
}
}
}
}
In the html I'm passing this, doing so I'm passing the element and in the Validate function you can access to the id just calling
在 html 中，我正在传递this，这样做我正在传递元素，并且在 Validate 函数中，您可以访问 id 只是调用
var id = element.id;
For the focus problem (caused by a loop problem) as you can see I'm using a validatingvariable to know when is validating when is not. This let Validatefunction avoids to go in loop. So:
对于焦点问题（由循环问题引起），如您所见，我正在使用验证变量来了解何时验证何时不验证。这让Validate函数避免进入循环。所以：
1) Define a validatingvar outsidethe Validate function and set it to false.
1)在 Validate 函数外定义一个验证var并将其设置为 false。
2) Fire the focusand alertonly if validatingis false, and after that set it to true
2）仅当验证为假时才触发焦点和警报，然后将其设置为真
回答by WoIIe
The javascript function alert(string)is synchronous. The script is paused while the user is reacting to the alerted message. There is no need to do something special. The following snippet should work:
javascript 函数alert(string)是同步的。当用户对警报消息做出反应时，脚本会暂停。没有必要做一些特别的事情。以下代码段应该有效：
alert(errors[id]);
document.getElementById(id).focus();
The element got focus directly after the user has submitted the alerted message.
在用户提交警报消息后，该元素直接获得焦点。
