स्क्रीन पर अलग इनपुट फ़ील्ड के रूप में दिखाई देने के लिए इनपुट फ़ील्ड का विभाजन कैसे करें? छवि पर

Question

देखो:

मैं छवि है, जहां एक 4 अंक एक बार पासवर्ड (OTP) उपयोगकर्ता द्वारा दर्ज किया जा रहा है में की तरह कुछ डिजाइन करना चाहते हैं। अभी मैंने इसे 4 अलग-अलग इनपुट द्वारा हासिल किया है और फिर जावास्क्रिप्ट में मानों को संयोजित किया है:

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

मुझे यकीन नहीं है कि यह सही दृष्टिकोण है या नहीं। मुझे लगता है कि कुछ स्टाइल विकल्प होना चाहिए जिसके द्वारा एक इनपुट टेक्स्टबॉक्स छवि में विभाजित एक के रूप में दिखाई देगा। क्या बूटस्ट्रैप का उपयोग करना संभव है? इनपुट के विभाजित क्षेत्र के रूप में प्रकट होने के लिए एक इनपुट नियंत्रण कैसे शैलीबद्ध करें?

Answer 1

आपको 4 अलग-अलग फ़ील्ड रखना नहीं है;

सबसे पहले आप 5

ugliness-- 4 चरित्र के लिए रेखांकित करता है ठीक करने के लिए चरित्र रिक्ति --EDIT समायोजित करना चाहिए, और की तुलना में नीचे के बॉर्डर शैली को समायोजित ...

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

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>

,210

मुझे लगता है कि यह एक प्रारंभिक बिंदु हो सकता है ... आशा है कि यह मदद मिलेगी ...

Answer 2

मैं सिर्फ यह 4 अलग-अलग फ़ील्ड दृष्टिकोण रखना होता है, और उन सभी को एक ही ईवेंट हैंडलर जोड़ने के लिए, जो होगा:

1. चेक कि क्या इनपुट मान्य है (चरित्र वर्ग में, आप को तैयार हैं स्वीकार करने के लिए)
2. जांचें कि आप किस क्षेत्र में हैं, और फिर फोकस को अगले फ़ील्ड, या ठीक बटन पर ले जाएं।

आप इसके लिए थोड़ा अलग जेएस भी लिख सकते हैं, और इसका पुनः उपयोग कर सकते हैं।

Answer 3

मैं एचटीएमएल 5 में एक इनपुट विभाजित करने के लिए कैसे, हो सकता है सीएसएस में आप अपने इनपुट नियंत्रित करने के लिए एक ही कक्षा उपयोग कर सकते हैं पता नहीं है और आप इनपुट, की तरह कुछ शैली कर सकते हैं:

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>

मेरा फ़ंक्शन() परिभाषित करें और आप अपनी कक्षा को अपनी कक्षा से प्राप्त कर सकते हैं: फॉर्म-कंट्रोल, स्ट्रिंग में कनवर्ट करें, फिर int में अगर आपको इसे जांचना है। यह मदद करता है?