具有自定义模式的HTML输入文本

$('input').on('input', function(){
  if($(this).val().length >= 4){
    $(this).next('input').focus();
  }
});

#wrapper{
  display: inline-block;
}

#longInput{
  grid-template-columns: auto auto auto auto;
  display: grid;
  grid-gap: 32px;
}

input{
  border: none;
  width: 6ch;
  background: 
    repeating-linear-gradient(90deg, 
        dimgrey 0, 
        dimgrey 1ch, 
        transparent 0, 
        transparent 1.5ch) 
      0 100%/100% 2px no-repeat;
  color: dimgrey;
  font: 5ch consolas, monospace;
  letter-spacing: .5ch;
}
input::after{
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
16 digit number:<br>
<div id="wrapper">
  <div id="longInput">
    <input maxlength="4"></input>
    <input maxlength="4"></input>
    <input maxlength="4"></input>
    <input maxlength="4"></input>
  </div>
</div>