JavaScriptのタブイベントを処理する方法

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> 

最初のテキストボックスからタブを押すと、上記のコードを確認してください。しかし、私は出力を取得します、2番目のテキストボックスイベントも発生します。複数のテキストボックスを使用してタブイベント処理を管理する方法。私は、最初のタブボックスのタブを打ったときの出力を得ることができると私は、他のテキストボックスを処理する必要があります。

Answer 1

代わりの​​を使用して、私は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にはない）バブリングイベントをサポートしているので、あなただけのフォームに一つのイベントリスナーを付けるのではなく、それぞれに1を取り付けることができます素子。