Giriş alanı, ekranda ayrı giriş alanları olarak görünecek şekilde nasıl bölümlenir? görüntüye

Question

Görünüş:

Ben 4 basamaklı bir şifre (OTP) kullanıcı tarafından girilecek olan görüntüde, içinde böyle bir şey tasarlamak istiyorum. Şu anda javascript 4 ayrı giriş ve ardından birleştirerek değerlerle başardıkları:

<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" /> 

Bu doğru bir yaklaşım olup olmadığından emin değilim. Bir girdi metin kutusunun görüntüde olduğu gibi bölümlenmiş olarak görüneceği bazı stil seçenekleri olması gerektiğini düşünüyorum. Önyükleme kullanarak mümkün mü? Bir giriş kontrolünün bölümlenmiş bölüm alanı olarak görünmesi nasıl şekillendirilir?

Answer 1

4 ayrı alanı korumak zorunda değilsiniz;

Önce 5

ugliness-- 4 karakter için altını düzeltmek için

#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 karakter aralığını ayarlamak ve daha alt sınır stilini ayarlamak gerekir

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>

ben ...

Answer 2

Sadece bu 4 ayrı alanlar yaklaşım tutmak ve irade, hangi hepsine aynı olay işleyicisi eklersiniz: girdi geçerlidir

1. kontrol edip (karakter sınıfında, istekli kabul etmek için)
2. Bulunduğunuz alanı kontrol edin ve odağı bir sonraki alana veya ok düğmesine getirin.

Bunun için ayrı bir JS yazabilir ve yeniden kullanabilirsiniz.

Answer 3

Belki css size girişini kontrol etmek amacı aynı sınıfını kullanabilirsiniz, html5 bir giriş bölmek nasıl bilmiyorum ve sizin gibi girdi, bir şey şekillendirebilirsiniz:

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() öğesini tanımlayın ve dizinizi sınıfa göre alabilirsiniz: form denetimi, dizgeye dönüştür, sonra da kontrol etmeniz gerekiyorsa int'ye dönüştür. Bu yardımcı olur?