如何在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>

Please check the above code when I hit the tab from first text box. I'll get the output however, the second text box event is also fired . How to manage Tab event handling using the multiple text boxes. I am able to get the output when hit tab on first tab box and I need to handle the other text boxes as well.

Answer 1

Instead of using keydown , I would recommend using the focusout event. That way, no matter how they took the focus away from the field whether by hitting tab, or by clicking on something else, the function will run.

 // 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> 

You could also use the blur event, but since focusout supports event bubbling ( blur does not), you can just attach one event listener to the form, instead of attaching one to each element.