Question

70

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

rated 0 times [ 76] [ 6] / answers: 1 / hits: 116006 / 8 Years ago, tue, january 17, 2017, 12:00:00

Look at the image:

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

khalidkendelld

Add To Favorites

Follow

Total Points: 55

Total Questions: 99

Total Answers: 77

Location: South Korea

Member since Tue, Feb 22, 2022

2 Years ago

answered 8 Years ago ignacio · Accepted Answer

You don't have to keep four separate fields.

First, you should adjust the character spacing, and then adjust the 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...