html - 限制每个字符在单独输入字段中的字符数

Question

我有一个输入字段，我想给它一个逐字符框字段的外观和感觉(下图)。

我的HTML和CSS写在下面。它们工作正常，除了我希望用户输入的最大长度为 6。当用户输入第 6 个字符时，框移出原位，即使第 7 个字符未添加到字段中。 我怎样才能避免这种情况？

添加的前 5 个字符:

添加第 6 个字符，对齐结束:

HTML:

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

CSS:

#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: 5px;
    letter-spacing: 12px;
}

Answer 1

使用一些 JS 可以模糊输入。

Obs.: 我在 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"/>