SOURCE

var input = document.querySelector('input'),
spans = document.querySelectorAll('span');

input.addEventListener('input', function() {
  var value = this.value,
  l = value.length;
  for (var i = 0; i < 4; i++) {
    spans[i].innerHTML = value[i] || '';
    spans[i].style.borderColor = '';
  }
  if (l > 0) {
    spans[Math.min(3, l)].style.borderColor = '#59C7B2';
  } else {
    spans[0].style.borderColor = '#59C7B2';
  }
},
false);
input.addEventListener('blur', function() {
  this.focus();
},
false);

input.focus();
spans[0].style.borderColor = '#59C7B2';

<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<input type="text" max-length='4'>

span {
  border: 2px solid #ccc;
  display: inline-block;
  height: 60px;
  width: 60px;
  line-height: 60px;
  text-align: center;
  margin: auto 4px;
  vertical-align: middle;
  font-size: 30px;
}

input {
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: none;
  background-color: transparent;
  color: transparent;
}

input:focus {
  outline: none;
}