Limit the number of characters in a separate input field for each character

Question

I have an input field and would want to give it a look and feel of a character-by-character box field (image below).

My HTML and CSS are written below. They

Answer 1

Using some JS you can blur the input.

Obs.: I did some adjusts in css..

$(document).ready(function(){
	$("#text").on('keypress', function(e){
  	if($(this).val().length > 4) {
    	var value = $(this).val() + String.fromCharCode(e.keyCode);
      $(this).val(value);
    	$(this).blur();
    }
  });
});

#text{
    background-image:
    url("http://3.bp.blogspot.com/-4oAWWCcNNz4/Tjr3nKNyVUI/AAAAAAAAPLU/Pouua-pNsEY/s1600/sq.gif");    
    width: 114px;
    height: 18px;
    background-size: 20px;
    border: none;
    font-family: monospace;
    font-size: 13px;
    padding-left: 6.5px;
    letter-spacing: 13px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" maxlength="6" id="text"/>

Answer 2

Use JavaScript. When the last number is entered the cursor will be set to the first position thus the display will be correct.

<script>
function gotoStart(waarde) {
    if (waarde.length == 6) {
        $("#text").get(0).setSelectionRange(0, 0);
        //set the focus to the next field\button to make the shifting of the cursor even less apparent if you want
        $("#text1").focus();
    }
}
</script>

<input type="text" maxlength="6" id="text" onkeyup="gotoStart(this.value)" />

Answer 3

If you are able to add another, wrapping element around the input then you can apply the background to that instead:

#wrapper {
  box-sizing: border-box;
  background-image: url("http://3.bp.blogspot.com/-4oAWWCcNNz4/Tjr3nKNyVUI/AAAAAAAAPLU/Pouua-pNsEY/s1600/sq.gif");    
  width: 120px;
  height: 20px;
  background-size: 20px;
  padding-left: 7px;
}
#text {
  background: none;
  display: block;
  width: 120px;
  padding: 3px 0 0;
  border: none;
  font-family: monospace;
  font-size: 13px;
  letter-spacing: 12px;
}

<div id="wrapper">
  <input type="text" maxlength="6" id="text"/>
</div>

The input element will then spill out of the container slightly, which is something to be aware of if there is other content flowing around it.

Answer 4

Looks like your letter spacing is too much.

Lower it by a pixel

letter-spacing: 11px;