如何在javascript中处理tab事件

Question

//  USING THE TAB EVENT     
$("input").keydown(function (e) {
    //alert("EVENT  :"+e.which)
    var regex = /^[a-zA-Z]*$/;
        var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        var fname = document.getElementById("first_name").value;
        var lname = document.getElementById("last_name").value;
        var phn = document.getElementById("phone").value;
        var emailid  = document.getElementById("email").value;
        var pass  = document.getElementById("password").value;
        var phoneno = /^\d{10}$/;  

   if (e.which == 9)
   {
    if(fname == "")
        {
            document.getElementById("first_name_err").innerHTML= "First name not be empty";
            document.getElementById("first_name_err").style.display = "block";
            return false; 
        }

        else
        {
            document.getElementById("first_name_err").innerHTML= "";
            document.getElementById("first_name_err").style.display = "none";

        }
        if (lname=="") 
        {
            document.getElementById("last_name_err").innerHTML= "Last name not be empty";
            document.getElementById("last_name_err").style.display = "block";

        }
        else
        {
            document.getElementById("last_name_err").innerHTML= "";
            document.getElementById("last_name_err").style.display = "none";

        }
   }

 <!-- BEGIN REGISTRATION FORM -->
                    <form method="post" id="create_account">
                        <h3 class="font-green">Sign Up</h3>
                        <div class="alert alert-danger" id="error" style="display: none;"></div>
                        <div class="alert alert-success" id="success" style="display: none;"></div>
                        <p class="hint"> Enter your personal details below: </p>
                        <div class="form-group">
                            <label class="control-label visible-ie8 visible-ie9">First Name</label>
                            <input class="form-control placeholder-no-fix" type="text" placeholder="First Name" name="first_name" id="first_name" onkeypress=" return onlyAlphabets(event)" />
                            <span id="first_name_err" style="display: none;"></span>
                        </div>
                        <div class="form-group">
                            <label class="control-label visible-ie8 visible-ie9">Last Name</label>
                            <input class="form-control placeholder-no-fix" type="text" placeholder="Last Name" name="last_name" id="last_name" onkeypress=" return onlyAlphabets(event)"/>
                            <span id="last_name_err" style="display: none;"></span>
                        </div>
                        <div class="form-group">
                            <label class="control-label visible-ie8 visible-ie9">Phone</label>
                            <input class="form-control placeholder-no-fix" type="text" placeholder="Phone" name="phone" id="phone" onkeypress="return isNumberKey(event)" maxlength="10" />
                            <span id="phone_err" style="display: none;"></span>
                        </div>
                        <div class="form-group">
                            <label class="control-label visible-ie8 visible-ie9">Email</label>
                            <input class="form-control placeholder-no-fix" type="text" placeholder="Email" name="email" id="email" />
                            <span id="email_err" style="display: none;"></span>
                        </div>
                        <div class="form-group">
                            <label class="control-label visible-ie8 visible-ie9">Password</label>
                            <input class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name=" password" id="password" onkeyup="nospaces(this)" />
                            <span id="password_err" style="display: none;"></span>
                        </div>
                        <div class="form-group margin-top-20 margin-bottom-20">
                            <label class="mt-checkbox mt-checkbox-outline">
                                <input type="checkbox" name="tnc" /> I agree to the
                                <a href="javascript:;">Terms of Service </a> &
                                <a href="javascript:;">Privacy Policy </a>
                                <span></span>
                            </label>
                            <div id="register_tnc_error"> </div>
                        </div>
                        <div class="form-actions">
                            <!-- <button type="button" id="register-back-btn" class="btn green btn-outline">Back</button> -->
                            <button type="button" id="register-submit-btn" class="btn btn-success uppercase create_account">Submit</button>
                        </div>
                    </form>

当我从第一个文本框中点击选项卡时，请检查上面的代码。然而，我会得到输出，第二个文本框事件也被触发。如何使用多个文本框管理Tab事件处理。我可以在第一个选项卡框上的“选项卡”中获取输出，我也需要处理其他文本框。

Answer 1

我建议使用keydown事件，而不是使用focusout。这样，无论他们如何通过点击标签或点击其他内容将焦点从场上移开，该功能都将运行。

//  USING THE TAB EVENT     
let validateForm = function (e) {

    var regex = /^[a-zA-Z]*$/;
        var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        var fname = document.getElementById("first_name").value;
        var lname = document.getElementById("last_name").value;
        var phn = document.getElementById("phone").value;
        var emailid  = document.getElementById("email").value;
        var pass  = document.getElementById("password").value;
        var phoneno = /^\d{10}$/;  

    if(fname == "")
        {
            document.getElementById("first_name_err").innerHTML= "First name not be empty";
            document.getElementById("first_name_err").style.display = "block";
            return false; 
        }

        else
        {
            document.getElementById("first_name_err").innerHTML= "";
            document.getElementById("first_name_err").style.display = "none";

        }
        if (lname=="") 
        {
            document.getElementById("last_name_err").innerHTML= "Last name not be empty";
            document.getElementById("last_name_err").style.display = "block";

        }
        else
        {
            document.getElementById("last_name_err").innerHTML= "";
            document.getElementById("last_name_err").style.display = "none";

        }
   }

$("#create_account").focusout(validateForm);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- BEGIN REGISTRATION FORM -->
                    <form method="post" id="create_account">
                        <h3 class="font-green">Sign Up</h3>
                        <div class="alert alert-danger" id="error" style="display: none;"></div>
                        <div class="alert alert-success" id="success" style="display: none;"></div>
                        <p class="hint"> Enter your personal details below: </p>
                        <div class="form-group">
                            <label class="control-label visible-ie8 visible-ie9">First Name</label>
                            <input class="form-control placeholder-no-fix" type="text" placeholder="First Name" name="first_name" id="first_name" onkeypress=" return onlyAlphabets(event)" />
                            <span id="first_name_err" style="display: none;"></span>
                        </div>
                        <div class="form-group">
                            <label class="control-label visible-ie8 visible-ie9">Last Name</label>
                            <input class="form-control placeholder-no-fix" type="text" placeholder="Last Name" name="last_name" id="last_name" onkeypress=" return onlyAlphabets(event)"/>
                            <span id="last_name_err" style="display: none;"></span>
                        </div>
                        <div class="form-group">
                            <label class="control-label visible-ie8 visible-ie9">Phone</label>
                            <input class="form-control placeholder-no-fix" type="text" placeholder="Phone" name="phone" id="phone" onkeypress="return isNumberKey(event)" maxlength="10" />
                            <span id="phone_err" style="display: none;"></span>
                        </div>
                        <div class="form-group">
                            <label class="control-label visible-ie8 visible-ie9">Email</label>
                            <input class="form-control placeholder-no-fix" type="text" placeholder="Email" name="email" id="email" />
                            <span id="email_err" style="display: none;"></span>
                        </div>
                        <div class="form-group">
                            <label class="control-label visible-ie8 visible-ie9">Password</label>
                            <input class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name=" password" id="password" onkeyup="nospaces(this)" />
                            <span id="password_err" style="display: none;"></span>
                        </div>
                        <div class="form-group margin-top-20 margin-bottom-20">
                            <label class="mt-checkbox mt-checkbox-outline">
                                <input type="checkbox" name="tnc" /> I agree to the
                                <a href="javascript:;">Terms of Service </a> &
                                <a href="javascript:;">Privacy Policy </a>
                                <span></span>
                            </label>
                            <div id="register_tnc_error"> </div>
                        </div>
                        <div class="form-actions">
                            <!-- <button type="button" id="register-back-btn" class="btn green btn-outline">Back</button> -->
                            <button type="button" id="register-submit-btn" class="btn btn-success uppercase create_account">Submit</button>
                        </div>
                    </form>

你也可以使用blur事件，但由于focusout支持事件冒泡（blur没有），你可以只将一个事件监听器附加到表单，而不是将一个附加到每个元素。