SOURCE

function change(e){
  var id = 'input'+e;
  if(e<3){
    var next = 'input'+(+e+1);
    var now = document.getElementById(id);
    var nextInput = document.getElementById(next);
    if(now.value.length==1){
        nextInput.focus();
    }
  }
}

<div>
   <input id="input1" data-index="1" class="input" maxlength="1" oninput="change('1')" /> 
   <input id="input2" data-index="2" class="input" maxlength="1" oninput="change('2')" /> 
   <input id="input3" data-index="3" class="input" maxlength="1" oninput="change('3')" /> 
</div>

.input{
  height:40px;
  line-height: 40px;
  width:40px; 
}
.input:focus{
    outline: 1px solid red;
    border:none;
    width:42px;
    height:42px;
}