Question

我有一个OTP页面，其中包含“ tel”类型的输入字段。它不应包含任何特殊字符，如果按有效数字，则应移至下一个字段；如果按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);
}
}

}

KeyUp事件：

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

}

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

0 个答案: