CODEWITHSUNDEEP
angularionic2
Krishna_32
Krishna_32

Reputation: 175

How to get the 4 input field a single row for ionic 2

check this link https://market.ionic.io/plugins/ionic-2-ion-numeric-keyboard

here i have an input type of one time password(OTP),in which if the user is registered with the same mobile number then the plugin will automatically read the code,If the user entered with the different number then he wanted to enter otp manually.i don't know how to split the input type line.

Below is the code:

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

Below is the screen shot what i got:

enter image description here

Below is the screen shot what should i get:

enter image description here

how to get the the 4 input field as you can see in the above image.

Upvotes: 3

Views: 20754

Answers (4)

Vikram Jit Singh
Vikram Jit Singh

Reputation: 31

I think this will work better:

  1. It work with both numeric top and number pad.
  2. CSS is much applied to specified area only.
  3. IONIC code is much better.

 moveFocus(event, nextElement, previousElement) {
    console.log(event.keyCode);
    if (event.keyCode === 8 && previousElement) {
      previousElement.setFocus();
    } else if (event.keyCode >= 48 && event.keyCode <= 57) {
      if (nextElement) {
        nextElement.setFocus();
      }
    } else if (event.keyCode >= 96 && event.keyCode <= 105) {
      if (nextElement) {
        nextElement.setFocus();
      }
    } else {
      event.path[0].value = '';
    }
  }
 .otp-box{
        margin-top: 23px;
        margin-right: 5px;
        h2{
            margin: 0;
            font-size: 12px;
            color: #b6b6be;
        }
        ion-input{
            text-align: center;
            border: 1px solid #e1e5e8;
            border-radius: 5px;
            margin-top: 8px;
            font-size: 14px;
            padding: 3px !important;
            padding-left: 0px !important;
            color: #383838;
            font-weight: 600;
            --padding-start: 0;
        }
        &:last-child{
            margin-top: 23px;
            margin-right: 0px;
        }
    }
 <ion-grid>
            <ion-row class="otp-box">
              <ion-col>
                <div>
                  <ion-input name="a" #a (keyup)="moveFocus($event,b,'')" type="tel" placeholder="0" maxlength="1">
                  </ion-input>
                </div>
              </ion-col>
              <ion-col>
                <div>
                  <ion-input name="b" #b (keyup)="moveFocus($event,c,a)" type="tel" placeholder="0" maxlength="1">
                  </ion-input>
                </div>
              </ion-col>
              <ion-col>
                <div>
                  <ion-input name="c" #c (keyup)="moveFocus($event,d,b)" type="tel" placeholder="0" maxlength="1">
                  </ion-input>
                </div>
              </ion-col>
              <ion-col>
                <div>
                  <ion-input name="d" #d (keyup)="moveFocus($event,e,c)" type="tel" placeholder="0" maxlength="1">
                  </ion-input>
                </div>
              </ion-col>
              <ion-col>
                <div>
                  <ion-input name="e" #e (keyup)="moveFocus($event,f,d)" type="tel" placeholder="0" maxlength="1">
                  </ion-input>
                </div>
              </ion-col>
              <ion-col>

                <div>
                  <ion-input name="f" #f (keyup)="moveFocus($event,'',e)" type="tel" placeholder="0" maxlength="1">
                  </ion-input>
                </div>
              </ion-col>
            </ion-row>
          </ion-grid>

Upvotes: 3

Bhautik Dobariya
Bhautik Dobariya

Reputation: 103

backspace work in this code

html

    <form class="form-container">
    <div>
      <ion-input name="a" #a (keyup)="moveFocus($event,b,'')" type="tel" placeholder="0"
        maxlength="1">
      </ion-input>
    </div>

    <div>
      <ion-input name="b" #b (keyup)="moveFocus($event,c,a)" type="tel" placeholder="0"
        maxlength="1">
      </ion-input>
    </div>

    <div>
      <ion-input name="c"  #c (keyup)="moveFocus($event,d,b)" type="tel" placeholder="0"
        maxlength="1">
      </ion-input>
    </div>

    <div>
      <ion-input name="d"  #d (keyup)="moveFocus($event,e,c)" type="tel" placeholder="0"
        maxlength="1">
      </ion-input>
    </div>

    <div>
      <ion-input name="e"  #e (keyup)="moveFocus($event,f,d)" type="tel" placeholder="0"
        maxlength="1">
      </ion-input>
    </div>

    <div>
      <ion-input name="f"  #f (keyup)="moveFocus($event,'',e)" type="tel" placeholder="0"
        maxlength="1"></ion-input>
    </div>
  </form>

css

form{
    margin-top: 34px;
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    div{
        margin-top: 23px;
        margin-right: 5px;
        h2{
            margin: 0;
            font-size: 12px;
            color: #b6b6be;
        }
        ion-input{
            text-align: center;
            border: 1px solid #e1e5e8;
            border-radius: 5px;
            margin-top: 8px;
            font-size: 14px;
            padding: 3px !important;
            padding-left: 0px !important;
            color: #383838;
            font-weight: 600;
            --padding-start: 0;
        }
        &:last-child{
            margin-top: 23px;
            margin-right: 0px;
        }
    }
}

ts

moveFocus(event, nextElement, previousElement) {
    if (event.keyCode == 8 && previousElement) {
      previousElement.setFocus();
    } else if (event.keyCode >= 48 && event.keyCode <= 57) {
      if (nextElement) {
        nextElement.setFocus();
      }
    } else {
      event.path[0].value = '';
    }

  }

Upvotes: 2

Darvin Kumar
Darvin Kumar

Reputation: 133

I have implemented the solution for backspace

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

}

Upvotes: 9

Ranjith Varatharajan
Ranjith Varatharajan

Reputation: 1694

I did a simple workaround for your question. It looks like this

enter image description here

Here is the code, Maybe you can get an idea how to do it in your own design,

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

I hope this will help you.

Upvotes: 8

Related Questions