У меня есть страница OTP с полями ввода с типом "tel".Он не должен допускать каких-либо специальных символов, и если нажата действительная цифра, он должен перейти к следующему полю, а если нажата клавиша возврата, фокус должен переместиться на предыдущее поле.
, поэтому я использую директиву с помощью селектора, чтобы не разрешать специальныесимвол и другое событие keyup для перехода к следующему / предыдущему полю в зависимости от длины ввода.Но когда пользователь вводит специальный символ, директива возвращает пустую строку и предполагает, что ее пробел пуст, а затем по ошибке перемещается в предыдущее поле.Буду признателен за любую помощь.
Было бы лучше, если бы я мог сделать автофокус с помощью самой директивы. Вот мой код ниже.
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:
следующее (событие, 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();
}
}
}