ejecutar una funcion con addEventListener

[mensajeescrito]

Hola amigas/os, veran tengo un problemilla, tengo un codigo que funciona en dos archivos.

En el archivo 1: Tengo en un formulario un campo input asi:

Código HTML:

<form bla bla bla>
 
<input type="text" name="nombre" id="Nombre" onkeypress="return miClaseValidar.alfaNumerico(event, 'car');" />
 
</form>
 

Este archivo 1, hace una llamada a una funcion en archivo 2 que me permite solo meter letras o numeros (segun configure la funcion).

En el archivo 2 hay:

Código Javascript:

var miClase = {
 
     alfaNumerico: function (elEvento, permitidos) {
 
bla bla bla
 
}
 
} //fin de miClase
 

Como digo todo funciona bien, pero lo que necesito es que la llamada a la funcion sea algo asi como:

Código Javascript:

document.getElementById("Nombre").addEventListener("keypress",  miClase.alfaNumerico, false);
 

Ya se que esta linea de codigo que he puesto esta mal, pero la pongo para que se entienda lo que necesito. es decir

que el codigo javascript esté en un archivo solo y no esté mezclado en el input del formulario.

y de esta manera solo capturando el id del input del formulario poder ejercutar la funcion del archivo 2.


Pero no se como hacerlo no me funciona.

agradeceria cualquier ayuda.

gracias.

[Alexis88]

Como necesitas pasarle argumentos al método, tienes que ejecutar la función anónima manejadora y dentro de ella deberás ejecutar la llamada al método:

Código Javascript:

document.getElementById("Nombre").addEventListener("keypress", function(event){
    miClase.alfaNumerico(event, "car");
}, false);
 

[mensajeescrito]

Gracias Alexis88, la verdad es que desconocía lo de la función anónima manejadora para solucionar esto.

Pero sigue sin funcionar, no entiendo la razón.

Mejor te pongo tal y como lo tengo a ver si me puedes guiar mas exactamente, mira:

En el archivo 1 (donde está el formulario):

Código HTML:

<form name="formularioRegistrarse" id="formularioRegistrarse" method="post" 
        
        action="opcs/opc_registro/validar_formulario_registrarse.php"> 
                
            
                <input type="text" name="nombre" id="Nombre" placeholder="Nombre" />
 
                <!--onkeypress="return miClaseValidar.alfaNumerico(event, 'car');"--> 
 
        </form>
 

En el archivo 2 tengo:

Código Javascript:

document.getElementById("Nombre").addEventListener("keypress", function(event){
        miClaseValidar.alfaNumerico(event, "car");
    }, false);
 
 
var miClaseValidar = {
 
/*PERMITIR A ALGUNAS CAJAS ADMITIR VALORES NUMERICOS, LETRAS O AMBAS COSAS.........................*/
 
     alfaNumerico: function (elEvento, permitidos) {
        
          // Variables que definen los caracteres permitidos
          var numeros = "0123456789";
          var caracteres = "abcdefghijklmnñopqrstuvwxyzABCDEFGHIJKLMNÑOPQRSTUVWXYZ";
          var caracteres_espacio = " abcdefghijklmnñopqrstuvwxyzABCDEFGHIJKLMNÑOPQRSTUVWXYZ";
          var caracteresPlus = "abcdefghijklmnñopqrstuvwxyzABCDEFGHIJKLMNÑOPQRSTUVWXYZ@-_"; 
              
          var numeros_caracteres = numeros + caracteres;
          var caracteres_espacio = caracteres_espacio;  
          var numeros_caracteres_plus = numeros + caracteres + caracteresPlus;            
          var teclas_especiales = [8, 37, 39, 46];
          // 8 = BackSpace, 46 = Supr, 37 = flecha izquierda, 39 = flecha derecha
        *
        
          // Seleccionar los caracteres a partir del parámetro de la función
          switch(permitidos) {
            case 'num':
              permitidos = numeros;
              break;
              
            case 'car':
              permitidos = caracteres;
              break;
              
            case 'num_car':
              permitidos = numeros_caracteres;
              break;
 
            case 'car_espacio':
              permitidos = caracteres_espacio;
              break;
 
            case 'num_car_plus':
              permitidos = numeros_caracteres_plus;
              break;              
          }
        *
          // Obtener la tecla pulsada
          var evento = elEvento || window.event;
          var codigoCaracter = evento.charCode || evento.keyCode;
          var caracter = String.fromCharCode(codigoCaracter);
        *
          // Comprobar si la tecla pulsada es alguna de las teclas especiales
          // (teclas de borrado y flechas horizontales)
          var tecla_especial = false;
          for(var i in teclas_especiales) {
            if(codigoCaracter == teclas_especiales[i]) {
              tecla_especial = true;
              break;
            }
          }
        *
          // Comprobar si la tecla pulsada se encuentra en los caracteres permitidos
          // o si es una tecla especial
          return permitidos.indexOf(caracter) != -1 || tecla_especial;
          
    } //fin function alfaNumerico   
 
} //fin de miClaseValidar
 

[eContento]

Cuando estás registrando el listener del evento, aún no está definido el objeto miClaseValidar.

Prueba a definir antes el objeto y luego a registrar el manejador del evento.

Un saludo

[mensajeescrito]

Acabo de probar a poner esto:

Código Javascript:

document.getElementById("Nombre").addEventListener("keypress", function(event){
        miClaseValidar.alfaNumerico(event, "car");
    }, false);
 

justo despues de la clase, pero sigue sin funcionar (( help!!!

[Alexis88]

Quizá se deba a que incluyes al archivo JS antes del cuerpo del documento. Como el código se ejecuta desde arriba hacia abajo, al no estar definidos los elementos del documento, la línea de código en la que tomas al elemento por su identificador, no surte efecto alguno.

Para evitar esto, tienes dos opciones: incluye al archivo JS justo antes de la etiqueta </body>, es decir, después de todos los elementos del documento o cuando estos hayan cargado, para lo cual necesitas utilizar el evento DOMContentLoaded:

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    //Todo el código JS en donde interactues con los elementos del documento
}, false);
 

Un saludo

[mensajeescrito]

Alexis que desesperacion llevo, ufff, he puesto en el archivo 1 donde esta el formulario, el enlace al archivo 2 .js , al final osea justo antes del </body>. Y nada no funciona.

Si está todo bien puesto y siguiendo cada punto como me lo has dicho, como es que no funciona?

No lo entiendo.
Me gustaria que hubiera un problema grande pero saber que tocar para arreglarlo, que tener un problema pequeño pero no saber por donde arreglarlo, como es este caso.

Por que no se que voy ha hacer ya.
por mas que reviso el codigo lo veo todo bien.

[Alexis88]

¿Aparece algún mensaje de error en la consola del navegador?

[mensajeescrito]

umm, no, no aparece ningun mensaje.

[IsaBelM]

Lo único que se me ocurre es usar preventDefault() para evitar el evento. En principio haría lo mismo que el return que usas en la asignación del evento en línea

[Alexis88]

No me había fijado en ese detalle. Creí que estaba ejecutando una función cualquiera, pero sí; además, ahora que veo el código del método, ¿por qué haces esto?, mensajeescrito:

Código Javascript:

var caracteres_espacio = " abcdefghijklmnñopqrstuvwxyzABCDEFGHIJKLMNÑOPQRSTUVWXYZ";
var caracteres_espacio = caracteres_espacio;