0

He leído que es con el evento keyup o keydown, pero no me funciona.. un ejemplo aca, que intenté realizar:

window.addEventListener("DOMContentLoaded", function() {
    var d = document,
        prueba = d.getElementById("prueba");
    prueba.addEventListener("keypress", function(j) {
        var codigo = 'which' in j ? j.which : j.keyCode;
        var caracter = String.fromCharCode(codigo);
        var patronNumerico = /[0-9]/g;
        var patronLetra = /^[a-zA-Z]*$/gi;
        if (patronNumerico.test(caracter)) {
            console.log(caracter + "\n" + "es un número!");
            return true;
        } else if (patronLetra.test(caracter)) {
            console.log(caracter + "\n" + "es una letra!");
            return true;
        } else {
            console.log("Caracter no válido..");
            return false;
        }
    });
});
<input type="text" id="prueba"/>

Lo que intento es que cuando escriban un caracter que no sea ni letra ni numero, simplemente no pueda escribirlo y en tiempo real, pero no lo bloquea, osea mi código si identifica que NO es una letra ni número pero no lo BLOQUEA.

1 respuesta 1

1

Utiliza el metodo event#preventDefault() para que no acepte el caracter invalido escrito.

En tu caso el objeto event seria el parametro j:

window.addEventListener("DOMContentLoaded",function(){

	var d = document, prueba = d.getElementById("prueba");
	prueba.addEventListener("keypress",function(j){
			var codigo = 'which' in j ? j.which : j.keyCode;
			var caracter = String.fromCharCode(codigo);
			var patronNumerico = /[0-9]/g;
			var patronLetra = /^[a-zA-Z]*$/gi;
			if(patronNumerico.test(caracter)) {
				console.log(caracter + "\n" + "es un número!");
				return true;
			}
			else if(patronLetra.test(caracter)){
				console.log(caracter + "\n" + "es una letra!");
				return true;
			}
			else {

                // evitamos que se escriba la letra en el input
				j.preventDefault(); 
				return false; 
			}
	});
});
<input type="text" id="prueba"/>

2
  • Junto con el return false, porque lo veo innecesario el return false, no?
    – ESCM
    Commented el 14 sept. 2017 a las 2:58
  • Hace lo mismo que el metodo preventDefault() pero por convencion y compatibilidad se retorna false.
    – Einer
    Commented el 14 sept. 2017 a las 3:00

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.