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

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中进行了一些调整..

＆＃13;

＆＃13;

$(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();
    }
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用JavaScript。输入最后一个数字时，光标将被设置为第一个位置，因此显示将是正确的。

<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

如果您能够在输入周围添加另一个包装元素，那么您可以将背景应用于该背景：

#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>

然后输入元素将稍微溢出容器，如果周围有其他内容流出则需要注意。

Answer 4

看起来你的字母间距太大了。

将其降低像素

letter-spacing: 11px;