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

Question

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:

Below is the screen shot what should i get:

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

Solution 1

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

}

Solution 2

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

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.

Solution 3

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>

Solution 4

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

  }

View more solutions

Comments

[Krishna_32]

Its okay!!!!!! but u designed externally the out side by using table. But i should enter the values in the line not rows and coloumns

[Krishna_32]

and also i should write in the input type i had mentioned in screens.

[Ranjith Varatharajan]

Just change the border styles of the table as you wish.

[Aman Jain]

its not working when type backspace it should back to the prev input box

[Aman Jain]

@RanjithVaradan but it should be according to standard, you can check anywhere when its four box then on press backspace it should go to the previous box

[cakePHP]

How I get the values from these 4 input filelds ?

[Darvin Kumar]

You can bind the value using ngModel

[Anusha]

When the focus comes back to the previous field on pressing backspace, I can still enter one more digit (and more by hitting backspace and entering again and again). I am using <ion-input type="number" inputmode="numeric" ></ion-input>. Any solution for this??

[Darvin Kumar]

add type="tel", since maxLength attribute doesn't work on type="number". By using input type as tel you will be able to open numeric keypad on devices

[Arshad]

Thanks Vikram !

[Snowbases]

@Ranjith Varatharajan i tried this but seems its not working properly in real device, i need to press 2 times to go next element