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

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


Solution 1:[1]

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.foucusOnInput(el.previousElementSibling);
                }else {
                    this.foucusOnInput(el.nextElementSibling);
                }
            }catch (e) {
                console.log(e);
            }
        }

       function foucusOnInput(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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 dasfdsa

Related Questions