Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Onkeypress Enter focus Input field

    • 0
    • 2
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.15k
    Comment on it

    Hii,
    In this blog I am going to share a javascript code using which we can create a form in which user can fill data without using mouse to move from one input field to another.

    You will see that on keypress enter focus will move to next input field and on keypress tab focus is disabled.
    Here's the example,please go through it.

     

    Example:

    Html:

    <form class="div1">
      <div>
          <label>Full Name:</label>
          <input id="nameI" type="text" name="Name" autofocus>
      </div>
       <div>
          <label>Father's Name:</label>
          <input id="FnameI" type="text" name="Name">
      </div>
      <div style="clear:both">
          <label>Country</label>
              <select name="Country" id="countryI">
               <option selected>[choose yours]</option>
               <option >USA</option>
               <option >UK</option>
               <option>INDIA</option>
              </select>
          </div>
        <div>
          <label style=" margin-top:3px;">Contact:</label>
          <input id="contactI" type="tel" name="contact_num" maxlength="10" size="10">
        </div>
        <div>
            <input id="chkboX" type="checkbox" name="agree" value="agree" required style="float:left;width:10px;margin:5px;">
            <p>i am sure that all data filled by me is correct.</p>
        </div>
        <div>
          <input type="button" value="submit" class="submit" id="subMit" onclick="printvalue()" style="margin-top:30px;float:left;">
      </div>
    
    </form>

    CSS:

    .clr:after{content: "";clear: both;display: block;}
        *{margin: 0;padding: 0;box-sizing:border-box;}
        body{font-family: arial;margin: 0 auto;width: 1024px;}
        form::after{clear: both;display: block;content: "";}
        div::after{clear: both;display: block;content: "";}
         form{width:700px;font-size: 20px;color: #fff;border:5px solid black;padding:30px;margin: 0 auto;
        box-sizing:border-box;background-color:rgb(94,94,94);}
        .div1 > div{width: 100%;margin:10px auto 0;}
        form label{float: left;width:100px;background-color:black;color:#fff;border-radius:5px;margin-bottom:5px;text-align:center;}
        form input{float: left;margin: 0 auto 0 10px;width:auto;color:#000;padding: 2px;}
        form select{margin-left:10px;}

    JAVASCRIPT:

    $(document).ready(function(){
      $('#nameI, #FnameI, #countryI, #contactI, #chkboX, #subMit').keypress(function(e){
                   var key =  e.keyCode ? e.keyCode : e.which;
                   var field = $(this).closest('div').next().find('#nameI, #FnameI, #countryI, #contactI, #chkboX, #subMit');
                    if(key == 13)
                    {
                        field.focus();
                        return false;
                    }
              });
    
    });
     
    
    $(document).keydown(function(objEvent) {
        if (objEvent.keyCode == 9) {  //tab pressed
            objEvent.preventDefault(); // stops its action
        }
    })
    
    

    Note:You must include this link of jquery library

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: