Question

我创建了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;

compoenent.ts代码：

 pin = [];  
 newStringPin = ' '; 

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

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

    this.resetPin();
}

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

Answer 1

您可以测量控件的validation并使用focus移至下一个输入。

基本逻辑----> DEMO

HTML：

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

TS：

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

切换到新的文本框，而无需使用Angular按下选项卡

1 个答案: