JSFiddle - React, Tailwind, and code Playground

by Sushil Mahajan

HTML

<p class='num'>

  <input class='value' />

</p>

CSS

.num {
  position: relative;
}

.number {
  position: absolute;
  top: 0;
  color: transparent !important;
  background: transparent;
  border: none;
}

JavaScript

$('.value').on('keydown keyup mousedown mouseup', function() {

   var val = this.value;
   var result = this.value;
   console.log("String(val).length", String(val).length);
   if (String(val).length < 7 && String(val).length !== 3) {
     result = String(val).replace(
       /.*/,
       function(string) {
         var maskChar = [];
         var newStr = string.replace("-", "");
         console.log("string:", newStr, maskChar.length);
         for (var i = 0; i < newStr.length; i++) {
           console.log("maskChar length:", maskChar.length);

           if (maskChar.length === 2 || maskChar.length === 5) {
            console.log("newStr[i] ", newStr[i] );
             
              console.log("add dash: ", maskChar.length);
               maskChar.push('X');
            
              maskChar.push('-');
             


           } else {
             maskChar.push('X');
           }
         }
         return maskChar.join('');
       });
   }

   $(".value").val(result); //spits the value into the input
 });