Question

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

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

<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事件。因此，您需要实施一种state处理，以帮助您避免由于此副作用而执行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;
                }
            }
        }

javascript专注于文本框上失败的验证在chrome和firefox中的工作方式不同

1 个答案: