javascript 专注于验证失败的文本框，在 Chrome 和 Firefox 中工作方式不同

Question

我正在验证一个文本框，如果验证失败，焦点应该位于同一个文本框上。我在互联网上搜索但没有找到任何合适的答案。

当我在 Firefox 中打开我的 asp 页面时，警报消息关闭后焦点会转到另一个控件，而在 chrome 中，警报消息无法关闭，每次我单击警报窗口的“确定”按钮或关闭按钮时，它都会重新出现。

<div class="form-group">
                            <label for="inputAge" class="col-md-2 control-label" id="lblAge">Age</label>
                            <div class="col-md-9">
                                <input type="text" id="inputAge" placeholder="35 or 25D or 5M"  runat="server" required="required" maxlength="3" onblur="return ValidateAge()" />
                            </div>
                        </div>

<script type="text/javascript">
        function ValidateAge() {
            var str = document.getElementById("inputAge").value;
            var number_regex = /^[1-9]\d*$/;

            if (str.slice(-1) === 'm') {
                var number_part = str.slice(0, -1);

                if (!number_regex.test(number_part)) {
                    alert("invalid age1");
                    document.getElementById("inputAge").focus();
                    return false;
                }
                else if (number_part > 12) {
                    alert("invalid age2");
                    document.getElementById("inputAge").focus();
                    return false;
                }
                else {
                    return true;
                }
            }
        }
    </script>

如果验证失败，如何将焦点设置到同一个文本框？

Answer 1

此问题取决于 document.getElementById("inputAge").focus() javascript 语句，该语句会触发另一个 blur 事件。因此，您需要实现一种状态处理，帮助您避免由于这种副作用而执行ValidateAge()。

也尝试一下这个实现:

        var cancelBlurEvent = false;
        function ValidateAge() {

            if(cancelBlurEvent === true){
              return cancelBlurEvent = false;
            } 

            var str = document.getElementById("inputAge").value;
            var number_regex = /^[1-9]\d*$/;
            if (str.slice(-1) === 'm') {
                var number_part = str.slice(0, -1);

                if (!number_regex.test(number_part)) {
                    alert("invalid age1");
                    cancelBlurEvent = true //it is important to change cancelBlurEvent value before next statement
                    document.getElementById("inputAge").focus();
                    return cancelBlurEvent;
                }
                else if (number_part > 12) {
                    alert("invalid age2");
                    cancelBlurEvent = true
                    document.getElementById("inputAge").focus();
                    return cancelBlurEvent;
                }
                else {
                    return cancelBlurEvent = false;
                }
            }
        }