JSFiddle - React, Tailwind, and code Playground

by gurvinder372

HTML

<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
  <form action="/" id="signup-form" method="post" enctype="multipart/form-data">
      <div class="sign-up-form-entry-half">
         <label class="input-label">First Name</label>
          <input type="text" name="first_name" class="sign-up-input sign-up-input-half" placeholder="First Name">
      </div>
       <div class="sign-up-form-entry-half">
           <label class="input-label">Last Name</label>
           <input type="text" name="last_name" class="sign-up-input sign-up-input-half" placeholder="Last Name">
       </div>

       <div class="sign-up-form-middle">
          <div class="sign-up-form-entry">
             <label class="input-label">Phone Number</label>
             <input type="tel" name="phone" class="sign-up-input" placeholder="Example: 990001">
         </div>

        <input type="submit" value="Sign Up"  class="sign-up-submit">
      </div>
  </form>

CSS

.input-label{
  display: block;
}
.sign-up-form-entry, .sign-up-form-entry-half {
    margin: 10px 0;
}

JavaScript

console.log($('#signup-form').find('input[name="phone"]'));
  $('#signup-form').on('keyup', 'input[name="phone"]', function(e) {
            
            // prevent from typing letters
            $(this).val($(this).val().replace(/[^\d.+]/g, ''));

            var textVal = $(this).val();
            console.log('entered value : ', textVal);
            if(textVal.substring(1).indexOf('+') > -1){
                 var newValRem = textVal.charAt(0) + textVal.substring(1).replace(/[+]/g, '');
                 console.log('removed plus version : ', '+' + newValRem);
                 $(this).val(newValRem);
            }

    });