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

【问题标题】：Create OTP form. input field to be appear as separate input fields on screen创建 OTP 表单。输入字段在屏幕上显示为单独的输入字段
【发布时间】：2018-06-07 01:53:28
【问题描述】：

我想设计类似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">

【问题讨论】：

试试这个fkranenburg.github.io/bootstrap-pincode-input
@DarshitHedpara - 粘贴不使用它
你可以使用 .bind('paste') 然后通过循环改变函数和填充
@DarshitHedpara 谢谢。我会试试的
祝你好运 :) 编码愉快 :)

标签： jquery angularjs html css

【解决方案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>

【讨论】：