Angular 如何将ionic 2的4输入字段设置为一行

检查此链接

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

代码如下：

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

下面是我得到的屏幕截图：

下面是我应该得到的屏幕截图：

如上图所示，如何获取4个输入字段

---

我为你的问题做了一个简单的变通。看起来像这样

这是代码，也许你可以在自己的设计中了解如何做到这一点

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>

.otp {
  color: darkgray;
  border-style: none;
  width: 60px;
  height: 60px;
  font-size: 50px;
}

td {
  border: 2px solid darkgray
}

table {
  border-collapse: collapse;
}

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

ts:

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

.otp {
  color: darkgray;
  border-style: none;
  width: 60px;
  height: 60px;
  font-size: 50px;
}

td {
  border: 2px solid darkgray
}

table {
  border-collapse: collapse;
}

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

---

我希望这对你有帮助

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

HTML:

TS:

OTP控制器（事件、下一个、上一个）{
if（event.target.value.length<1&&prev）{
上一个setFocus（）
}
else if（next&&event.target.value.length>0）{
next.setFocus（）；
}
否则{
返回0；
} 

---

}此代码中的退格操作

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>

ts

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

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

  }

moveFocus（事件、下一个事件、上一个元素）{
if（event.keyCode==8&&previousElement）{
previousElement.setFocus（）；
}否则，如果（event.keyCode>=48&&event.keyCode我认为这会更好：

它与数字键盘和数字键盘一起工作
CSS通常只应用于特定区域
离子代码更好

moveFocus（事件、下一个事件、上一个元素）{
console.log（event.keyCode）；
if（event.keyCode==8&&previousElement）{
previousElement.setFocus（）；
}否则如果（event.keyCode>=48&&event.keyCode=96&&event.keyCode为什么不使用CSS？我认为发布时不需要CSS，所以我不提它。是的，但使用CSS你可以内联显示你的输入…我没有在输入文本框中提到任何CSS。。输入你需要的任何数量的输入，并将其样式设置为内联！！！！！然后绑定到keyup切换到next input！！！！！没问题！！！！！但是你使用table从外部设计了out端。但是我应该在行中输入值，而不是行和列，并且我应该在屏幕中输入我提到的输入类型。只需根据你的意愿更改表格的边框样式。当键入backspace时它不起作用，它应该返回到上一个输入box@RanjithVaradan但它应该是根据标准的，你可以在任何地方检查它的四个框，然后按backspace键，它应该转到上一个框我如何从这四个输入文件中获取值？你可以使用NGModel绑定值当焦点返回到上一个字段按backspace键时，我仍然可以输入一个数字（还有更多的方法是点击backspace并反复输入）。我正在使用。任何解决方案？？添加type=“tel”，因为maxLength属性在type=“number”上不起作用。通过将输入类型用作tel，您将能够在设备上打开数字键盘感谢Vikram！