Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to partition input field to appear as separate input fields on screen?

Look at the image:

enter image description here

I want design something like in the image, where a 4 digit one time password (OTP) is to be entered by user. Right now I have achieved this by 4 separate inputs and then combining values in 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" /> 

I am not sure if this is correct approach. I think there must be some styling options by which one input textbox would appear as partitioned one like in the image. Is it possible using bootstrap? How to style one input control to be appeared as partitioned field of inputs?

like image 804
Karan Desai Avatar asked Jan 17 '17 13:01

Karan Desai


Video Answer


2 Answers

You dont have to keep 4 separate fields;

First you should adjust the character spacing, and than adjust border style of bottom...

#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;   outline : none; }
<input id="partitioned" type="text" maxlength="4" />

--EDIT to fix 5 underlines for 4 character ugliness--

var obj = document.getElementById('partitioned'); obj.addEventListener('keydown', stopCarret);  obj.addEventListener('keyup', stopCarret);   function stopCarret() {     if (obj.value.length > 3){         setCaretPosition(obj, 3);     } }  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">     <div id="divInner">         <input id="partitioned" type="text" maxlength="4" />     </div> </div>

I think this can be a starting point... hope this will help...

like image 172
Ufuk Onder Avatar answered Oct 03 '22 10:10

Ufuk Onder


I know this question is old. I stumbled upon this when I was trying to achieve the same for my project.

I couldn't find what I needed. So I made one myself with the ideas from here

You can use this with any number of characters and needs no change in javascript as long as all the input fields are inside a div with id="otp".


Here is a preview:

enter image description here


Take a look at the code here

function OTPInput() {   const inputs = document.querySelectorAll('#otp > *[id]');   for (let i = 0; i < inputs.length; i++) {     inputs[i].addEventListener('keydown', function(event) {       if (event.key === "Backspace") {         inputs[i].value = '';         if (i !== 0)           inputs[i - 1].focus();       } else {         if (i === inputs.length - 1 && inputs[i].value !== '') {           return true;         } else if (event.keyCode > 47 && event.keyCode < 58) {           inputs[i].value = event.key;           if (i !== inputs.length - 1)             inputs[i + 1].focus();           event.preventDefault();         } else if (event.keyCode > 64 && event.keyCode < 91) {           inputs[i].value = String.fromCharCode(event.keyCode);           if (i !== inputs.length - 1)             inputs[i + 1].focus();           event.preventDefault();         }       }     });   } } OTPInput();
@import url('https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css'); .form-control {   -webkit-transition: none;   transition: none;   width: 32px;   height: 32px;   text-align: center }  .form-control:focus {   color: #3F4254;   background-color: #ffffff;   border-color: #884377;   outline: 0; }  .form-control.form-control-solid {   background-color: #F3F6F9;   border-color: #F3F6F9;   color: #3F4254;   transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }  .form-control.form-control-solid:active, .form-control.form-control-solid.active, .form-control.form-control-solid:focus, .form-control.form-control-solid.focus {   background-color: #EBEDF3;   border-color: #EBEDF3;   color: #3F4254;   transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
<div class="mb-6 text-center">   <div id="otp" class="flex justify-center">     <input class="m-2 text-center form-control form-control-solid rounded focus:border-blue-400 focus:shadow-outline" type="text" id="first" maxlength="1" />     <input class="m-2 text-center form-control form-control-solid rounded focus:border-blue-400 focus:shadow-outline" type="text" id="second" maxlength="1" />     <input class="m-2 text-center form-control form-control-solid rounded focus:border-blue-400 focus:shadow-outline" type="text" id="third" maxlength="1" />     <input class="m-2 text-center form-control form-control-solid rounded focus:border-blue-400 focus:shadow-outline" type="text" id="fourth" maxlength="1" />     <input class="m-2 text-center form-control form-control-solid rounded focus:border-blue-400 focus:shadow-outline" type="text" id="fifth" maxlength="1" />     <input class="m-2 text-center form-control form-control-solid rounded focus:border-blue-400 focus:shadow-outline" type="text" id="sixth" maxlength="1" />   </div> </div>
like image 28
Midhun Monachan Avatar answered Oct 03 '22 11:10

Midhun Monachan