Javascript - 在警告消息后设置焦点

Question

当验证失败时，我试图专注于同一元素。这是我的 HTML 代码:

<input
id="potatoes" name="potatoes" value="" type="text" class="tooltip"
onblur="Validate('potatoes')" autocomplete='off'>

这是我的 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);
    }
} 

我尝试使用 .focus() 方法设置焦点，但它不起作用。我读到它可能取决于 HTML 中的“onblur”，当我调用我的函数 Validate() 时，所以我尝试更改它但直到现在都没有任何效果。

Answer 1

这里有一个问题。这段代码进入循环。当触发 'focus' 时，将再次调用 Validate 函数，显示另一个警告对话框。

这是一个工作代码

HTML

<input id="potatoes" name="potatoes" value="" type="text" class="tooltip" onblur="Validate(this)" autocomplete='off'>

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

在 html 中，我传递了 this，这样做我传递了元素，在 Validate 函数中，您只需调用即可访问 id

var id = element.id;

如您所见，对于焦点问题(由循环问题引起)，我使用了一个validating 变量来了解何时进行验证，何时不进行验证。这个 let Validate 函数避免了进入循环。所以:

1) 在 Validate 函数的外部定义一个validating 变量并将其设置为 false。

2) 仅当validating 为false 时触发focus 和alert，然后将其设置为true