이온 2

Question

체크를위한 4 개의 입력 필드를 사용자가 동일한 휴대 전화 번호와 함께 등록되어 있는지되는 나 일회용 암호 (OTP)의 입력 형식이 여기 https://market.ionic.io/plugins/ionic-2-ion-numeric-keyboard

링크를 하나의 행을 얻는 방법 플러그인은 자동으로 코드를 읽습니다. 사용자가 다른 번호로 입력 한 경우 수동으로 otp를 입력하려고합니다 .i 입력 유형 줄을 분할하는 방법을 모릅니다.

아래

내가 가야 무엇 스크린 샷입니다 : 아래

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

내가 무엇을 가지고 스크린 샷 : 다음

코드입니다

위의 이미지에서 볼 수있는 것처럼 4 입력 필드를 얻는 방법.

Answer 1

귀하의 질문에 대한 간단한 해결책을 만들었습니다. 그것은 다음은이

처럼 보이는 것은 어쩌면 당신이 얻을 수있는 코드입니다, 당신의 자신의 디자인에

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; 
} 

01 23,516,

TS는 :

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

내가 당신을 도울 바랍니다.