如何为离子 2 获取 4 个输入字段的单行答案

【问题标题】：How to get the 4 input field a single row for ionic 2如何为离子 2 获取 4 个输入字段的单行
【发布时间】：2016-12-16 07:19:39
【问题描述】：

查看此链接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 输入字段。

【问题讨论】：

为什么不使用 CSS ？
我觉得发帖不需要css，所以不提了
是的，但是使用 css 你可以内联显示你的输入...
我没有在输入文本框中提到任何css..
输入您需要的任意数量的输入并将它们设置为内联！！！！！！！然后只需绑定到 keyup 即可切换到下一个输入！！！！！！

标签： angular ionic2

【解决方案1】：

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

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

}

【讨论】：

如何从这 4 个输入文件中获取值？
可以使用ngModel绑定值
当焦点回到按退格键的上一个字段时，我仍然可以再输入一个数字（通过按退格键并一次又一次地输入更多）。我正在使用。有什么解决办法吗？？
添加 type="tel"，因为 maxLength 属性不适用于 type="number"。通过使用输入类型为 tel，您将能够在设备上打开数字键盘

【解决方案2】：

我为您的问题做了一个简单的解决方法。看起来是这样的

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

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

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

【讨论】：

没关系！！！！！！但是你用桌子在外面设计了。但我应该在行中输入值而不是行和列
而且我应该用我在屏幕中提到的输入类型来写。
随心所欲更改表格的边框样式。
当输入退格键时它不起作用，它应该回到上一个输入框
@RanjithVaradan 但它应该符合标准，您可以在它的四个框时检查任何地方，然后按退格键它应该转到上一个框

【解决方案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>

【讨论】：

谢谢维克拉姆！

【解决方案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;
        }
    }
}

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

  }

【讨论】：