Wie das 4 Eingabefeld eine einzelne Zeile für ionisches 2

Question

Check diesen Link https://market.ionic.io/plugins/ionic-2-ion-numeric-keyboard

hier bekommt ich einen Eingabetyp einer Zeit Kennwort (OTP), in dem, wenn der Benutzer mit der gleichen Handy-Nummer registriert ist dann liest das plugin automatisch den code, wenn der benutzer mit der anderen nummer eingibt, möchte er manuell otp eingeben. ich weiß nicht wie ich die eingabetypzeile aufteilen soll.

Unten finden Sie den Code ein:

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

Unten ist der Screenshot, was ich habe:

Unten ist der Screenshot, was soll ich bekommen:

Wie Sie das 4 Eingabefeld erhalten, wie Sie im obigen Bild sehen können.

Answer 1

Ich habe eine einfache Problemumgehung für Ihre Frage. Es sieht aus wie dieses

Hier ist der Code, Vielleicht können Sie eine Idee bekommen, wie es in Ihrem eigenen Design zu tun,

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

Ich hoffe, dies wird Ihnen helfen.