如何將輸入字段分區以在屏幕上顯示爲單獨的輸入字段？

我想設計的東西，如圖像，其中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" />

我不知道這是否是正確的做法。我認爲必須有一些樣式選項，通過這些選項，一個輸入文本框會像圖像一樣顯示爲分區。是否有可能使用引導程序？如何設置一個輸入控件的樣式以顯示爲輸入的分區字段？

來源

2017-01-17 Karan Desai

這將有助於你http://digitalbush.com/projects/masked-input-plugin/ –

也許你可以嘗試使用css「letter-spacing」屬性來增加輸入字段文本中的間距。另外，您可以「調整」標準邊框短劃線樣式以適應您的間距。以下鏈接可能會幫助您調整破折號的寬度。 HTTP：//計算器。com/questions/6250394/how-to-increase-space-between-dotted-border-dots –

你不必保留4個獨立的領域;

首先，你應該調整字符間距，比調整底部邊框樣式...

#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修復5強調了4個字符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>

我覺得這可能是一個起點...... 希望這將有助於...

來源

2017-01-17 15:01:07

如果我們在輸入少數數字後沒有給出最大長度4，那麼我正面臨着字符對齊的問題。去右邊它沒有對齊輸入字段的短劃線的中心 –

是的你是對的，似乎這是限制:(作爲一個附註，實際上有5個分區線。對於這個醜陋，你可以將輸入字段放在div中，並將該div放入另一個div中...內部div必須是粘性的，而外部div必須隱藏溢出... –

我只想記住這4個獨立的領域接近，而且相同的事件處理程序添加到所有的人，這將：輸入

檢查是否有效（以字符類，你願意以接受）
檢查您所在的字段，然後將焦點移至下一個字段或確定按鈕。

你甚至可以爲它寫一個單獨的JS，並重新使用它。

來源

2017-01-17 13:48:07 Dan

我不知道如何在HTML5拆分輸入，也許在CSS就可以使用同一個類CONTROLL你的輸入，你可以輸入風格，喜歡的東西：

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。幫助這個？

來源

2017-01-17 14:46:00 Teshtek

如何將輸入字段分區以在屏幕上顯示爲單獨的輸入字段？

回答

相關問題