JSFiddle - React, Tailwind, and code Playground

by Mostafa Zeinivand

HTML

<table>
<tr>
<td><input id="digit1" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td>
<td><input id="digit2" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> 
<td><input id="digit3" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td>
<td><input id="digit4" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td>
<td><input id="digit5" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> 
<td><input id="digit6" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td>
<td><input id="digit7" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td>
<td><input id="digit8" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td>
<td><input id="digit9" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td>
<td><input id="digit10" type="text"maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td>
</tr> 
</table>

<input type = "button" value="Get Phone Number" onClick="getPhoneNumber()">

CSS

table, td {
  border-collapse: collapse;
  padding: 0;
  border: solid 1px #232323;
  border-radius: 5px;
}

td input{
  width:20px;
}

JavaScript

var currentDigit = 1;
window.isNumberKey = function(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

window.moveToNextInputDigit =  function(e){
     currentDigit = parseInt(e.id.replace("digit",""));
     currentDigit++; 
     if(e.value.length == 1 && currentDigit<=10 && document.getElementById("digit"+currentDigit).value.length!=1)
     {
      document.getElementById("digit"+currentDigit).focus();
     }
}

window.getPhoneNumber = function()
{
 var phoneNumber = "";
 for(var i=1;i<=10;i++)
 {
    phoneNumber += document.getElementById("digit"+i).value;
 }
 
  alert("Phone Number: "+ phoneNumber);
}