2

Saludos, necesito ayuda controlando los eventos de teclado y no encuentro nada. Tengo un script en el que controlo un input type=[text] que imita un input de password, enmascarando la contraseña y guardando el valor de la misma. El problema es que me he dado cuenta de que si escribo muy rápido, la función no se termina de ejecutar y no enmascara todos los caracteres (es decir, existen dos o tres keydown antes de que se ejecute el keyup insertado en la función) y no se como controlarlo. El código es el siguiente;

var t = document.getElementById('txt');

var pass_val = '';
var contador = 0;

t.onkeydown = function(event) {
    var key = event.keyCode;
    if (key !== 8) {
        t.onkeyup = function() {
            if (key !== 8) {
                pass_val = pass_val + t.value.substr(t.value.length - 1, 1);
            } else {
                pass_val = pass_val.slice(0, -1);
            }
            if (t.value != '')
                t.value = t.value.slice(0, -1) + '●';
        }
    }
}
<input type="text" id="txt">

¿Cómo puedo controlar que no se ejecute un evento de key hasta que se complete la función o hasta que se ejecute el keyup?

2
  • Hay algún motivo para no usar un input password? Hay más problemas que ése... Commented el 7 nov. 2017 a las 10:05
  • Es un ejercicio de aprendizaje
    – asantana o
    Commented el 7 nov. 2017 a las 10:15

2 respuestas 2

2

Hay varios problemas en lo que estás haciendo: si dejas pulsada una tecla se detecta un evento pero se escriben varios caracteres, y no puedes parar los eventos o ignorarlos porque te daría más problemas. Una aproximación mejor, pero que también tiene problemas (si mueves el cursor con las flechas, ya no sabes dónde se está insertando el caracter), podría ser ésta:

var t = document.getElementById('txt');
var p = document.getElementById('enplano');

var pass_val = '';
var lastChar
var contador = 0;

t.oninput = function(event) {
  console.log(`Tipo de evento: ${event.inputType}`);
  if (event.inputType=='insertText') {
    
    pass_val+=event.data;
    t.value='';
    for (let i=0;i<pass_val.length;i++) {
      t.value+='●';
    }
  } else if (event.inputType=='deleteContentBackward') {
  debugger;
    pass_val=pass_val.substring(0,pass_val.length-1);
    
  }
  p.value=pass_val;
    
}
<input type="text" id="txt">
<input type="text" id="enplano">

6
  • Entiendo lo que quieres decir, pero el inputType me lo marca como indefinido. No se a que intentas igualar dentro del event.
    – asantana o
    Commented el 7 nov. 2017 a las 10:39
  • Fíjate que uso oninput como evento a capturar, intento averiguar si estás añadiendo un caracter (guardado en data) o borrando un carácter Commented el 7 nov. 2017 a las 10:42
  • Si lo he mirado, pero no existe inputType dentro del evento oninput. O yo estoy mal y no lo encuentro. Pero la consola cuando evaluo event.inputType con cualquier tecla me devuelve undefined y no entra en los condicionales
    – asantana o
    Commented el 7 nov. 2017 a las 10:49
  • No sé cómo lo has implementado, pero mi ejemplo puedes probarlo con el botón ejecutar. Lo he editado para que muestre ese valor en cada pulsación. Commented el 7 nov. 2017 a las 11:40
  • No lo he implementado, he usado tu ejemplo. El problema es que firefox no reconoce el inputType, en chrome me ha funcionado perfecto. Me estaba volviendo ya loco. De todas maneras ya lo tengo casi de otra forma que ahora postearé.
    – asantana o
    Commented el 7 nov. 2017 a las 12:03
1

Por si a alguien le sirviera, dejo por aquí la solución que he encontrado para que funcione en Firefox. El problema del conflicto entre keydown y keyup lo he solucionado usando el evento keypress.

De esta manera, el primer carácter escrito se enmascara en el segundo evento de teclado, y así sucesivamente. Además controlo cuando se presiona el backspace (keyCode = 8) diferenciando la primera vez de las siguientes, con un auxiliar booleano, para poder guardar correctamente el pass_val. De igual manera, cuando pierde el foco, guardo y escondo el último carácter pulsado.

Este es el código;

var t = document.getElementById('txt');

var pass_val = '';
var key;

function passMask() {

    var aux = true;
    t.onkeypress = function(event) {

        key = event.which;
        if (key !== 8) {
            aux = true;
            pass_val = pass_val + t.value.substr(t.value.length - 1, 1);
            if (t.value != '')
                t.value = t.value.slice(0, -1) + '●';
        } else {
            if (aux) {
                pass_val = pass_val + t.value.substr(t.value.length - 1, 1);
                aux = false;
            } else {
                pass_val = pass_val.substr(0, pass_val.length - 1);
            }
        }
    }

    t.onblur = function() {
        if (key !== 8) {
            pass_val = pass_val + t.value.substr(t.value.length - 1, 1);
        } else {
            pass_val = pass_val.slice(0, -1);
        }
        if (t.value != '')
            t.value = t.value.slice(0, -1) + '●';
    }

    t.onfocus = function() {
        t.value = '';
        pass_val = '';
    }

}

passMask();
<input type="text" id="txt">

Aclarar que aún no he implementado un control para las teclas que no sean de carácteres.

1
  • Cambia luego (creo que hay que esperar 24 horas) la respuesta aceptada a la tuya, creo que es una solución mejor a la que yo aporté Commented el 7 nov. 2017 a las 14:02

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.