Jak podzielić pole wejściowe, aby wyglądało jak oddzielne pola wprowadzania na ekranie?

Question

Spójrz na obrazek:

Chcę zaprojektować coś jak na zdjęciu, gdzie 4 cyfra jeden raz hasło (OTP) ma zostać wprowadzony przez użytkownika. Teraz osiągnąłem to przez 4 osobne wejścia, a następnie łącząc wartości w 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" /> 

Nie jestem pewien, czy to jest prawidłowe podejście. Myślę, że muszą istnieć pewne opcje stylizacji, dzięki którym jeden wejściowy textbox będzie wyglądał jak podzielony na partycje, jak na obrazku. Czy to możliwe za pomocą bootstrap? Jak ukształtować jedną kontrolkę wejściową, aby pojawiła się jako podzielone pole wejść?

Answer 1

Nie musisz trzymać 4 oddzielne pola;

Najpierw należy dostosować odstępy między znakami, a ponad dostosować styl obramowania z dołu ...

#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 naprawić 5 do 4 podkreśla charakter ugliness--

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>

myślę, może to być punkt wyjścia ... nadzieję, że pomoże ...

Answer 2

chciałbym tylko zachować podejście to 4 oddzielne pola i dodać taką samą procedurę obsługi zdarzenia do wszystkich z nich, które będą:

1. Sprawdź, czy wejście jest prawidłowy (w klasie znaków, jesteś gotów akceptować)
2. sprawdzić, które pola jesteś w, a następnie przenieść fokus do następnego pola, lub przycisk oK.

Można nawet napisać trochę oddzielnego JS i ponownie go użyć.

Answer 3

nie wiem jak podzielić wejście w HTML5, może w CSS można użyć tej samej klasy do Controll swoje wejście i można projektować wejście, coś jak:

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>

Definiowanie myFunction() i można dostać swoją tablicę o swojej klasie: forma sterowania, konwersja na ciąg następnie do int, jeśli trzeba to sprawdzić. Pomaga to?