Create OTP form. input field to be appear as separate input fields on screen

Question

I want design something like in the Image, where a 6 digit one time password (OTP) is to be entered by user. Right now I have achieved this by 6 separate inputs and then combining values in angularjs:

 <input type="text" min="1" max="1" name="codess1" [(ngModel)]="codess1" id="code1" #codes1="ngModel" (keydown)="setfocus($event)" autocomplete="off">

 <input type="text" name="codess2" [(ngModel)]="codess2" id="code2" #codes2="ngModel" (keydown)="setfocus($event)" disabled autocomplete="off">

 <input type="text" name="codess3" id="code3" [(ngModel)]="codess3" #codes3="ngModel" (keydown)="setfocus($event)" disabled autocomplete="off">

 <input type="text" name="codess4" id="code4" [(ngModel)]="codess4" #codes4="ngModel" (keydown)="setfocus($event)" disabled autocomplete="off">

 <input type="text" name="codess5" id="code5" [(ngModel)]="codess5" #codes5="ngModel" (keydown)="setfocus($event)" disabled autocomplete="off">

 <input type="text" name="codess6" id="code6" [(ngModel)]="codess6" #codes6="ngModel" (keydown)="setfocus($event)" disabledautocomplete="off">

try this http://fkranenburg.github.io/bootstrap-pincode-input/ — Darshit Hedpara, Dec 26 '17 at 06:56
u can use .bind('paste') then change function and the fill through loop — Darshit Hedpara, Dec 26 '17 at 07:04
@DarshitHedpara Can you give me sample code for paste functionality. I have tried it but not succeed — sunny gaikwad, Jan 04 '18 at 07:50
Possible duplicate of [How to partition input field to appear as separate input fields on screen?](https://stackoverflow.com/questions/41698357/how-to-partition-input-field-to-appear-as-separate-input-fields-on-screen) — shifu, Jan 08 '19 at 03:53

score -1 · Answer 1 · edited Mar 21 '23 at 12:31

solution with vanilla JS

 function inputInsideOtpInput(el) {
            if (el.value.length > 1){
                el.value = el.value[el.value.length - 1];
            }
            try {
                if(el.value == null || el.value == ""){
                    this.focusOnInput(el.previousElementSibling);
                }else {
                    this.focusOnInput(el.nextElementSibling);
                }
            }catch (e) {
                console.log(e);
            }
        }

       function focusOnInput(ele){
           ele.focus();
           let val = ele.value;
           ele.value = "";
           // ele.value = val;
           setTimeout(()=>{
               ele.value = val;
           })
       }

input{
  width: 30px;
}

    <div style="display: flex;justify-content: center" id="otp-container">
        <input oninput="inputInsideOtpInput(this)"
               maxlength="1" type="number">

        <input oninput="inputInsideOtpInput(this)"
               maxlength="1" type="number">

        <input oninput="inputInsideOtpInput(this)"
               maxlength="1" type="number">

        <input oninput="inputInsideOtpInput(this)"
               maxlength="1" type="number">

        <input oninput="inputInsideOtpInput(this)"
               maxlength="1" type="number">

        <input oninput="inputInsideOtpInput(this)"
               maxlength="1" type="number">
    </div>

Create OTP form. input field to be appear as separate input fields on screen

1 Answers1