各文字の別の入力フィールドの文字数を制限する

Question

私は入力フィールドを持っていて、それを文字別の文字フィールド（下の画像）のルックアンドフィールにしたいと考えています。

私のHTMLとCSSは以下の書かれています。ユーザーが入力する最大の長さを除いて正常に動作します。ユーザーが6番目の文字を入力すると、7番目の文字がフィールドに追加されていなくてもボックスは移動しません。 どうすればこの問題を回避できますか？

最初の5つの文字が追加さ：

を第六文字がアライメントが出て、コメントを追加しました：

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(){ 
 
\t $("#text").on('keypress', function(e){ 
 
    \t if($(this).val().length > 4) { 
 
    \t var value = $(this).val() + String.fromCharCode(e.keyCode); 
 
     $(this).val(value); 
 
    \t $(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

あなたの文字間隔が多すぎるように見えます。ピクセル

letter-spacing: 11px; 

Answer 3

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 4

をしました：

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

入力要素がコンテナからわずかに流出します。これは、周囲に他のコンテンツが流れているかどうかを知るためのものです。