在Ionic Android中自动聚焦下一个输入字段并移至退格键上的上一个字段

Question

我有一个带有“ tel”类型输入字段的OTP页面。 它不应该允许任何特殊字符，如果按有效数字，则应移至下一个字段；如果按Backspace，则焦点应移至上一个字段。

所以我正在使用使用选择器的指令以不允许特殊字符和另一个键入事件根据输入长度移动到下一个/上一个字段。 但是，当用户输入特殊字符时，伪指令返回空字符串，并假定其退格为空，然后错误地移至上一个字段。 任何帮助，将不胜感激。

如果我可以使用指令本身进行自动对焦，那就更好了。这是下面的代码。

HTML：

<ion-row [formGroup]="otpForm">
                    <ion-col col-2>
                        <ion-item>
                           <ion-input text-center formControlName="otp1" [ngClass]="setClasses('otp1')" class="padding-left" #otp1 type="tel"  [(ngModel)]="forgotOTP.otp1" (input)='onChangeTime(forgotOTP.otp1)'[max-length]='1' (keyup)="next($event,otp2,otp1)"  is-number >
                            </ion-input>
                         </ion-item>
                   </ion-col>
                      <ion-col col-2>
                           <ion-item>
                                <ion-input text-center formControlName="otp2" [ngClass]="setClasses('otp2')" class="padding-left" #otp2 type="tel" [(ngModel)]="forgotOTP.otp2"  (input)='onChangeTime(forgotOTP.otp2)'  [max-length]='1' (keyup)="next($event,otp3,otp1)"  is-number>
                               </ion-input>
                                  </ion-item>
                       </ion-col>
</ion-row>

指示：

    import { Directive, HostListener,EventEmitter, Input,Output } from '@angular/core';
import { Platform } from "ionic-angular";
/**
 * Generated class for the IsNumberDirective directive.
 *
 * See https://angular.io/api/core/Directive for more info on Angular
 * Directives.
 */
@Directive({
  selector: '[is-number]' // Attribute selector
})
export class IsNumberDirective {
  //private regex: RegExp =  new RegExp(/^\d*[0-9]\d*$/g);
  private regex: RegExp =  new RegExp(/^[0-9]*$/);
  @Input('is-number') numberValue:number;
  private specialKeys: Array<string> = [ 'Backspace', 'Tab', 'End', 'Home' ];
  @Output() ngModelChange:EventEmitter<any> = new EventEmitter();
  private oldValue:any;
  constructor(public platform:Platform) {
    console.log('Hello IsNumberDirective Directive');
  }
  @HostListener('keypress', ['$event']) onKeyPress(event) {
    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
      }
      console.log("current"+this.numberValue);
      let current:string = this.numberValue.toString();
      this.oldValue=event.target.value;

      let next: string = current.concat(event.key);
      console.log("next"+next);
      debugger;
      if (next && !String(next).match(this.regex)) {
      event.preventDefault();
      }
}
@HostListener('paste', ['$event'])
 onPaste($event) {
   this.onKeyPress($event)
 }
 @HostListener('keyup',['$event']) onKeyup(event) {
   debugger;
  const element = event.target as HTMLInputElement;
  let newValue = element.value;
  console.log("new value in number"+element.value);

  if (this.platform.is('android')) {
    console.log("test regex "+!this.regex.test(newValue) )
    if (!this.regex.test(newValue)) {
      element.value = newValue.slice(0, -1);

    }else{
      element.value = newValue;
    }

  this.ngModelChange.emit(element.value);
}
}

}

按键事件：

next（event，el，prevel）{

let regex: RegExp =  new RegExp(/^[0-9]*$/);


let value=event.target.value;


if(this.platform.is('android')){
if(regex.test(value)){
  if (event.target.value.length == 1) {
    el.setFocus();
   }else if(el.value.length == 0) {
     prevel.setFocus();
   }
  }
}else if(this.platform.is('ios')){
  if (this.specialKeys.indexOf(event.key) !== -1) {
  if(el.value.length == 0) {
       prevel.setFocus();
     }
    }
   if(String(event.key).match(regex) != null){
    if (event.target.value.length == 1) {
      el.setFocus();
     }else if(el.value.length == 0) {
       prevel.setFocus();
     }
   }

}