Question

我希望设计类似于Image的设计，用户输入一个6位一次性密码（OTP）。现在我通过6个独立的输入实现了这一点，然后在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">

Answer 1

使用香草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>

创建OTP表单。输入字段在屏幕上显示为单独的输入字段

1 个答案: