入力フィールドを分割して画面に別々の入力フィールドとして表示する方法はありますか？画像で

Question

ルック：

私は4桁のワンタイムパスワード（OTP）は、ユーザが入力したことがある画像、のようなものをデザインしたいです。今私は4つの独立した入力でこれを達成し、次にjavascriptで値を組み合わせます：

<input type="text" class="form-control" placeholder="0" maxlength="1" /> 
<input type="text" class="form-control" placeholder="0" maxlength="1" /> 
<input type="text" class="form-control" placeholder="0" maxlength="1" /> 
<input type="text" class="form-control" placeholder="0" maxlength="1" /> 

これが正しいアプローチであるかどうかわかりません。私は1つの入力テキストボックスが画像のように分割されたものとして現れるいくつかのスタイリングオプションがなければならないと思います。ブートストラップを使用することは可能ですか？ 1つの入力コントロールを入力の分割フィールドとして表示するようにスタイルを設定するにはどうすればよいですか？

Answer 1

4つのフィールドを個別に保持する必要はありません。

まず、文字間隔を調整する必要があり、下の境界線スタイルを調整するよりも...

ugliness-- 4文字の5アンダーラインを修正する

#partitioned { 
 
    padding-left: 15px; 
 
    letter-spacing: 42px; 
 
    border: 0; 
 
    background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%); 
 
    background-position: bottom; 
 
    background-size: 50px 1px; 
 
    background-repeat: repeat-x; 
 
    background-position-x: 35px; 
 
    width: 220px; 
 
}

<input id="partitioned" type="text" maxlength="4" />

--edit

var obj = document.getElementById('partitioned'); 
 
obj.addEventListener("keydown", stopCarret); 
 
obj.addEventListener("keyup", stopCarret); 
 

 
function stopCarret() { 
 
\t if (obj.value.length > 3){ 
 
\t \t setCaretPosition(obj, 3); 
 
\t } 
 
} 
 

 
function setCaretPosition(elem, caretPos) { 
 
    if(elem != null) { 
 
     if(elem.createTextRange) { 
 
      var range = elem.createTextRange(); 
 
      range.move('character', caretPos); 
 
      range.select(); 
 
     } 
 
     else { 
 
      if(elem.selectionStart) { 
 
       elem.focus(); 
 
       elem.setSelectionRange(caretPos, caretPos); 
 
      } 
 
      else 
 
       elem.focus(); 
 
     } 
 
    } 
 
}

#partitioned { 
 
    padding-left: 15px; 
 
    letter-spacing: 42px; 
 
    border: 0; 
 
    background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%); 
 
    background-position: bottom; 
 
    background-size: 50px 1px; 
 
    background-repeat: repeat-x; 
 
    background-position-x: 35px; 
 
    width: 220px; 
 
    min-width:220px; 
 
} 
 

 
#divInner{ 
 
    left: 0; 
 
    position: sticky; 
 
} 
 

 
#divOuter{ 
 
    width:190px; 
 
    overflow:hidden 
 
}

<div id="divOuter"> 
 
\t <div id="divInner"> 
 
\t \t <input id="partitioned" type="text" maxlength="4" /> 
 
\t </div> 
 
<div>

私は、これが出発点とすることができると思う... 希望、これはそれがあなたのために参考になる

Answer 2

私はこの4つの別々のフィールドが接近し続ける、となる、それらのすべてに同じイベントハンドラを追加します。入力が有効である

1. チェックするかどうか（文字クラスでは、あなたが喜んでいます
2. 現在のフィールドを確認し、フォーカスを次のフィールドに移動するか、[OK]ボタンをクリックします。

それに少し別のJSを書いて再利用することもできます。

Answer 3

私は、多分CSSで、あなたの入力をcontrollする同じクラスを使用することができますし、入力のスタイルを設定することができ、HTML5で入力を分割する方法のようなものを知らない：

div{ 
 
    text-align:center; 
 
    background:#eee; 
 
} 
 
input{ 
 
    border: 0; 
 
    outline: 0; 
 
    background: transparent; 
 
    border-bottom: 2px solid black; 
 
    width: 100px; 
 
    text-align:center; 
 
    padding : 5px; 
 
    margin-left:10px; 
 
} 
 
button{ 
 
    margin-top:20px !important; 
 
    margin: 0 auto; 
 
    color: white; 
 
    border-radius: 4px; 
 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 
 
}

<div> 
 
    <input class="form-control" placeholder="0" maxlength="1" /> 
 
    <input class="form-control" placeholder="0" maxlength="1" /> 
 
    <input class="form-control" placeholder="0" maxlength="1" /> 
 
    <input class="form-control" placeholder="0" maxlength="1" /> 
 
    <br><button type="button" onclick="myFunction()">Submit</button> 
 
    <p id="optRes"></p> 
 
</div>

を

myFunction（）を定義し、配列でクラスを取得することができます：form-control、文字列に変換してint型に変換します。これを助ける？