Los eventos KeyUp
no funcionan en algunos dispositivos. En un iPhone6
y 8
funciona bien, en un Huawei P7
funciona también, pero en otro Huawei
no está funcionando y en un Samsung S7
tampoco.
Tengo un código que lo que hace es saltar al siguiente input
cuando se ingresa un valor, cuando se completan los 4
los envía automáticamente haciendo un POST
. Si se oprime la tecla de borrar se limpia todo el formulario.
keyup (e) {
if (e.keyCode >= 48 && e.keyCode <= 57 || e.keyCode >= 96 && e.keyCode <= 105) {
if (+e.key == 0 || +e.key) {
this[`requestCode${+e.target.id}`] = e.key;
if (+this.aux >= 0 && +this.aux < 4) {
this.number[+e.target.id] = (this[`requestCode${+e.target.id}`]);
this.aux++;
}
if (+this.aux == 4) {
this.number[e.target.id] = +e.key;
}
let tempString = this.number.join();
tempString = tempString.replace(/,/g, '');
this.validate = tempString;
this.jsf.updateValue(this, tempString);
var validarSend = this.validate.indexOf("*");
if(validarSend == -1) {
// Valida si los 4 dígitos están completos antes de enviarlo
let div: HTMLElement = document.getElementsByClassName('CodeSubmit')[0] as HTMLElement;
let element: HTMLElement = div.getElementsByTagName('button')[0] as HTMLElement;
element.click();
}
return true;
}
}
// Al presionarl Backspace reinicia los inputs
if(e.key == "Backspace"){
this.modelForm.reset();
}
return false;
}
Aquí tengo el HTML
donde muestro 4 inputs
.
<div [formGroup]=modelForm class="formsOtp">
<br>
<div class="transform-number">
<input type="text" min="0" max="9" required="required" (keyup)="keyup($event)" id="0" fnFocus pattern="[0-9]*" class="inputOtp" inputmode="numeric"
minlength="1" maxlength="1" formControlName=requestCode1 [ngModel]="requestCode0" autocomplete="off"> <div class="raya"></div>
<input type="text" min="0" max="9" required="required" (keyup)="keyup($event)" id="1" fnFocus pattern="[0-9]*" class="inputOtp" inputmode="numeric"
minlength="1" maxlength="1" formControlName=requestCode2 [ngModel]="requestCode1" autocomplete="off"> <div class="raya"></div>
<input type="text" min="0" max="9" required="required" (keyup)="keyup($event)" id="2" fnFocus pattern="[0-9]*" class="inputOtp" inputmode="numeric"
minlength="1" maxlength="1" formControlName=requestCode3 [ngModel]="requestCode2" autocomplete="off"> <div class="raya"></div>
<input type="text" min="0" max="9" required="required" (keyup)="keyup($event)" id="3" fnFocus pattern="[0-9]*" class="inputOtp" inputmode="numeric"
minlength="1" maxlength="1" formControlName=requestCode4 [ngModel]="requestCode3" autocomplete="off">
</div>
</div>
<div class="button-validator">
<p>¿No recibiste el código?<button mat-raised-button color=primary type="button" (click)="resendCode();">Has clic aquí</button></p>
</div>
El problema no es que no pase al siguiente input
, el problema está en que cuando se ingresa un carácter no hace el POST
, no está haciendo el Click
que se le está indicando.
Ya lo depuré y el valor que se retorna en el evento es 229
o es undefined
en cualquier carácter que ingreso, no entra al primer if
.
e
lo trae 229 y es indefinido"? Dices que no entra al primerif
pero entonces eso quiere decir que el eventoKeyUp
está funcionando.