如何将4输入字段设置为离子2的单行

Question

点击此链接https://market.ionic.io/plugins/ionic-2-ion-numeric-keyboard

这里我有一个输入类型的一次性密码(OTP),如果用户使用相同的手机号码注册,那么插件将自动读取代码,如果用户使用不同的号码输入,那么他想要手动输入otp .i不知道如何拆分输入类型行.

以下是代码:

<ion-input  type="number" 
                    id="otpNumber" 
                    class="form-control"
                    pattern="[0-9]{6}"
                    formControlName="otpNumber">
        </ion-input>

下面是我得到的屏幕截图:

下面是屏幕截图我应该得到什么:

如上图所示,如何获取4输入字段.

Answer 1

我已经实现了退格的解决方案

HTML：

<ion-row text-center>
  <ion-col>
   <ion-input #otp1 required maxLength="1" (keyup)="otpController($event,otp2,'')">
   </ion-input>
   <ion-input #otp2 required maxLength="1" (keyup)="otpController($event,otp3,otp1)">
   </ion-input>
   <ion-input #otp3 required maxLength="1" (keyup)="otpController($event,otp4,otp2)">
   </ion-input>
   <ion-input #otp4  required maxLength="1" (keyup)="otpController($event,'',otp3)">
   </ion-input>
  </ion-col>
</ion-row>

CSS：

ion-input{
 display:inline-block;
 width:50px;
 height:50px;
 margin:10px;
 border-radius: 50%;
 --background:#e1e1e1;
 --padding-start:7px;
 }

TS：

 otpController(event,next,prev){
   if(event.target.value.length < 1 && prev){
     prev.setFocus()
   }
   else if(next && event.target.value.length>0){
     next.setFocus();
   }
   else {
    return 0;
   } 

}

Answer 2

我为你的问题做了一个简单的解决方法.看起来像这样

这是代码,也许你可以在自己的设计中了解如何做到这一点,

HTML:

<table>
    <tr>
      <td>
        <ion-input type="text" #otp1 class="otp" pattern="[0-9]{6}" maxlength="1" size="1" (keyup)="next(otp2)">
        </ion-input>
      </td>
      <td>
        <ion-input type="text" #otp2 class="otp" pattern="[0-9]{6}" maxlength="1" size="1" (keyup)="next(otp3)">
        </ion-input>
      </td>
      <td>
        <ion-input type="text" #otp3 class="otp" pattern="[0-9]{6}" maxlength="1" size="1" (keyup)="next(otp4)">
        </ion-input>
      </td>
      <td>
        <ion-input type="text" #otp4 class="otp" pattern="[0-9]{6}" maxlength="1" size="1">
        </ion-input>
      </td>
    </tr>
  </table>

CSS:

.otp {
  color: darkgray;
  border-style: none;
  width: 60px;
  height: 60px;
  font-size: 50px;
}

td {
  border: 2px solid darkgray
}

table {
  border-collapse: collapse;
}

TS:

next(el) {
    el.setFocus();
  }

我希望这能帮到您.