0

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.

2
  • ¿A qué te refieres con "Ya lo depuré y el valor que se ingresa en e lo trae 229 y es indefinido"? Dices que no entra al primer if pero entonces eso quiere decir que el evento KeyUp está funcionando.
    – ElChiniNet
    Commented el 8 oct. 2019 a las 20:29
  • Sí está entrando al evento, pero devuelve un KeyCode 229 de cualquier tecla. Commented el 9 oct. 2019 a las 22:53

1 respuesta 1

0

Leyendo tu comentario noto que los eventos KeyUp están funcionando, lo que no funciona bien es capturar el keyCode de la tecla que has presionado en algunos dispositivos Android. Pero una búsqueda rápida me deja ver que no eres el único y que el problema no está en tu código. El keyCode debe devolver 229 si el input está siendo procesado en caso de que el evento sea KeyDown (pero parece ser que en algunos dispositivos Android esto también ocurre en KeyUp).

Leyendo las respuestas del enlace de SO, se me ocurre algo similar a una de ellas y es hacer un procesamiento especial solo en Android para obtener el keyCode llamando al método charCodeAt de String en el carácter acabado de escribir en vez de tomar el valor del evento. En el resto de los dispositivos tomar el valor del evento normalmente. Algo como lo siguiente (no lo he probado pero debe funcionar):

Ten en cuenta que keyCode está obsoleto y no es recomendado hacer uso de él. Lo recomendado es empezar a hacer uso de code.

private isAndroid = navigator.userAgent.toLowerCase().indexOf('android') >= 0;

private keyCode = function () {
    const input = this.currentTarget;
    return input.value.charAt(input.selectionStart - 1).charCodeAt();
};

keyup (e) {

    const code = this.isAndroid
        ? this.keyCode.call(e)
        : (e.code || e.keyCode);

    // Realizar tus chequeos
    if (code >= 48 && code <= 57) {
        ...
    }

}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.