使用Angular切换到新文本框，无需按tab键

我已经创建了3个不同的输入框。但如何不按键盘上的Tab键直接切换到新的文本框。我已将其存储在newStringPin中

<input type="text" style="width: 38px;" [(ngModel)]="pin[0]" maxlength="2" autocomplete="off" (keyup)="atmAdd(pin[0], 0, atmForm)" #zero name="GST_0"> 


<input type="text"  maxlength="10" style="width: 110px;" [(ngModel)]="pin[1]"  autocomplete="off" [disabled]="!pin[0]" (keyup)="atmAdd(pin[1], 1)" #one name="GST_1"> &nbsp;


<input type="text" [(ngModel)]="pin[2]" maxlength="3" style="width: 45px;" autocomplete="off" [disabled]="!pin[1]" (keyup)="atmAdd(pin[2], 2)" #two name="GST_2"> &nbsp;

---

您可以测量控件的

验证

，并使用

焦点

移动到下一个输入

基本逻辑-->

HTML:

---

是：）如果我必须以同样的形式再创建一个呢？我只需要更改名称，对吗？是的，更改名称、id，如果您有大量输入，那么在*ngFor中迭代并维护索引将很容易。如果解决方案有帮助的话。请接受，以便其他人可以轻松找到它。

 pin = [];  
 newStringPin = ' '; 

 atmAdd(val, i , form) {
    this.pin[i] = val;
 }

pinSubmit() {
    this.newStringPin = this.pin.join('');  

    this.resetPin();
}

resetPin() {
    this.pin = [];
}

<p>
    Auto Focus on valid input
</p>

<input type="text" id="1" style="width: 38px;" [(ngModel)]="pin[0]" maxlength="2" autocomplete="off" (keyup)="next(pin[0], 2, 1)"
 #zero name="GST_0">&nbsp;

<input type="text" id="2" maxlength="10" style="width: 110px;" [(ngModel)]="pin[1]" autocomplete="off" [disabled]="!pin[0]"
 (keyup)="next(pin[1], 2, 2)" #one name="GST_1"> &nbsp;

<input type="text" id="3" [(ngModel)]="pin[2]" maxlength="3" style="width: 45px;" autocomplete="off" [disabled]="!pin[1]"
 (keyup)="next(pin[2], 2, 3)" #two name="GST_2"> &nbsp;

next(pin, length, curId) {
    console.log(pin);
    if (pin.toString().length == length && curId != 3) {
      document.getElementById((curId+1).toString()).focus()
    }
  }