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

这里有一个问题。这段代码循环进行。触发'焦点'时，再次调用函数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中我正在传递这个，这样做我传递了元素，在Validate函数中你可以访问id只是调用

var id = element.id;

对于焦点问题（由循环问题引起），您可以看到我正在使用验证变量来知道何时验证不是。这让验证函数避免进入循环。所以：

1）在Validate函数中定义验证 var ，并将其设置为false。

2）仅当验证为false时才触发焦点和警告，然后将其设置为 true

Answer 2

javascript函数alert(string)是同步的。当用户对提醒消息作出反应时，脚本暂停。没有必要做一些特别的事情。以下代码段应该有效：

alert(errors[id]);
document.getElementById(id).focus();

在用户提交警报消息后，该元素直接获得焦点。

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

2 个答案: