JSFiddle - React, Tailwind, and code Playground

by Anirban Nath

HTML

<div class="control-group">
     <label class="control-label" for="inputPhone">Cell Phone Number #:</label>
         <div class="controls"> 

    <input class="span3 mr-botom-10" type="tel" id="HomePhone1" name="HomePhone1" value="" onkeydown="phoneNumberValidate('HomePhone1',3,'HomePhone2')" maxlength="3"  pattern="" title="">  
                                                    <input class="span3 mr-botom-10" type="tel" id="HomePhone2" name="HomePhone2" value="" onkeydown="phoneNumberValidate('HomePhone2',3,'HomePhone3')" maxlength="3"  pattern="" title="">                                          
                                                    <input class="span3 mr-botom-10" type="tel" id="HomePhone3" name="HomePhone3"  value="" onkeydown="phoneNumberValidate('HomePhone3',4,'')" maxlength="4"  pattern="" title="">   

                                               </div>
                                            </div>

JavaScript

$(function(){
    
    
function phoneNumberValidate(phone1,match_len,phone2)
{

  //called when key is pressed in textbox
  $("#"+phone1).keypress(function (e) 
  {
    var entered_key = String.fromCharCode(e.which);

     //if the letter is not digit then display error and don't type anything
         if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) 
         {
             return false;
         }
         else
         {
          var phone=$("#"+phone1).val();

          var field_len=phone.length;


           if(field_len==match_len && e.which != 8 )
           {



             $("#"+phone2).focus().val(entered_key);

           }
         }
   });

} 
    
});