Question

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

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

以下是代码：

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

<强> TS：

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

我希望这会对你有所帮助。

Answer 2

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

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 3

我认为这会更好：

它既可以用于数字键盘，也可以用于数字键盘。
CSS仅适用于指定区域。
IONIC代码更好。

 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>

Answer 4

此代码中的退格键

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

  }

如何将4输入字段设为离子2

4 个答案: