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;
}