Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » ejecutar una funcion con addEventListener

JavaScript - ejecutar una funcion con addEventListener

Volver
Nuevo Tema
<<>>
 
Vista:

ejecutar una funcion con addEventListener

Publicado por Sam (106 intervenciones) el 16/03/2016 17:19:32
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:

1
2
3
4
5
<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:

1
2
3
4
5
6
7
8
9
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:

1
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.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

ejecutar una funcion con addEventListener

Publicado por Sam (106 intervenciones) el 17/03/2016 11:13:23
He probado con esto otro, se que estoy cerca pero sigue sin funcionarme:

archivo 1:

1
2
3
4
5
6
7
8
9
10
<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>


Archivo 2:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
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
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 10
Ha aumentado su posición en 10 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

ejecutar una funcion con addEventListener

Publicado por deo (23 intervenciones) el 18/03/2016 09:36:06
Asi al botepronto, esto no lo veo:
var codigoCaracter = evento.charCode || evento.keyCode;

equivaldrá a:
var codigoCaracter = true; // ¿?

tal vez debes usar

var codigoCaracter = evento.charCode;
o
var codigoCaracter = evento.keyCode;

según detalles de que sean o no significativas las mayusculas, etc

Echa un ojo a: https://www.w3.org/2002/09/tests/keys.html
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas
Val: 95
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

ejecutar una funcion con addEventListener

Publicado por Vainas (258 intervenciones) el 18/03/2016 20:19:28
Buenas:

deo esto funciona bien:

1
var codigoCaracter = evento.charCode || evento.keyCode;

Es una condicion para ver si existe charCode o keyCode (que unos navegadores implementan y otros no. El tema es que si existe el primero pues lo asigna a codigoCaracter y sino asigna el segundo.

En lo de las mayusculas en nombre si que vas un poco mas acertado. Yo usaria minisculas para todo. Luego no se si funcionará con mayusculas.

He probado el codigo simple y funciona: https://jsfiddle.net/ap0kyzoo/

Comprueba que tu codigo este depues de crear los elementos en html es decir, coloca el script justo antes de cerrar body asi puede asegurar al menos que se ha creado el elemento input.

Espero que te funcione. Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar