Manejo de funciones semanticas

[Fernarey1810]

Hola. La consulta q quiero hacer es simple. Una forma de separar el codigo dinamico del html es usando funciones semanticas, de este tipo:

Código Javascript:

// Función externa
function muestraMensaje() {
alert('Gracias por pinchar');
}
// Asignar la función externa al elemento
document.getElementById("pinchable").onclick = muestraMensaje;
// Elemento XHTML
<input id="pinchable" type="button" value="Pinchame y verás" />
 

Este ejemplo funciona bien, pero el problema lo tengo al querer pasarle parametros a la funcion, de esta forma:

Código Javascript:

document.getElementById("nombre").onFocus = muestraOculta(1,'nombre');
 

Esto no funciona, porque ejecuta una función y guarda su resultado en una propiedad de un elemento. Y lo q yo quiero hacer es asignar una función externa a un evento de un elemento. Como resuelvo esto?.

[caricatos]

Hola:

Prueba así:

document.getElementById("nombre").onfocus = function(a, b) {muestraOculta(1,'nombre');}

Saludos

[Fernarey1810]

1- No me funciona che.
document.getElementById("nombre") is null. Este es el error q me tira

2- function(a,b) otra cosa porque le pones estos parametros?

[caricatos]

Hola:

Fíjate que en tu primer ejemplo usaste algo con id="pinchable"... luego usaste lo de nombre... el error que tienes es porque no hay nada con id="nombre"...

Saludos

[Fernarey1810]

Ese ejemplo caricatos lo copie de un tutorial.
Estoy usando bien el ID, y en mi pagina es 'nombre', no 'pinchable', eso era un ej nomas de lo que queria hacer.. Tenes idea entonces como lo resuelvo?

POR LAS DUDAS NO ME QUEDO CLARO LO Q PONES EN function (a, b), alomejor estoy poniendo mal estos parametros. nose porque pones esto exactamente, = no creo q sea por ello, pero por las dudas lo consulto.

[zerokilled]

el principio basico es que tienes que crear una funcion anonima que invoca a tu funcion pasandole los parametros necesarios. eso es lo que caricatos te ha tratado de demostrar.

Código:

elemento.evento = function(){
invoca_funcion(parametro1, parametro2, ..., parametroN);
}

[Fernarey1810]

Ya no tira mas el error que es nulo (is null), porque lo coloco dentro de

Código Javascript:

window.onload = function() {
    document.getElementById("nombre").onFocus = function() { muestraOculta(1,'nombre'); }
}
 

El problema es q ahora no anda XD. osea no se lanza el evento onFocus.
Este es el input q tengo

Código HTML:

<input type="text" id="nombre" name="idUsuario" value="<?php if (isset($_POST['idUsuario'])) echo htmlspecialchars($_POST['idUsuario']); ?>" onKeyPress="return permite(event,'num_car',15,'nombre')" onKeyUp="actualizaInfo(15, 1,'nombre')"
onFocus="muestraOculta(1,'nombre');">
 

Como podras observar estoy quitando los eventos para q quede mas prolijo, eso lo hice asi en modo desarrollo nomas. Entonces cuando quito onFocus me queda asi:

Código HTML:

<input type="text" id="nombre" name="idUsuario" value="<?php if (isset($_POST['idUsuario'])) echo htmlspecialchars($_POST['idUsuario']); ?>" onKeyPress="return permite(event,'num_car',15,'nombre')" onKeyUp="actualizaInfo(15, 1,'nombre')">
 

Código Javascript:

window.onload = function() {
    document.getElementById("nombre").onFocus = function() { muestraOculta(1,'nombre'); }
}
 

Esta bien no???. Pero no anda. Q falla?

[zerokilled]

javascript es sensible a las mayusculas y minusculas. en javascript, todos los eventos se escriben en minuscula. fijate que tu codigo aparece como onFocus. adicional, dependiendo del HTML que estes utilizando, los atributos tambien se escriben en minuscula aunque esto no supone un problema para el navegador pero igual no te valida el documento.

[Fernarey1810]

Ya lo solucione pasa q antes habia un onload. y yo lo ponia en otro.

Código Javascript:

window.onload = function() {
        document.getElementById("nombre").onfocus = function() { muestraOculta(1,'nombre'); 
         Calendar.setup({
         inputField: "fecha",
         ifFormat: "%d-%m-%Y",
         button: "selector"
    }); initListGroup('paises', document.forms[0].pais, document.forms[0].provincia, document.forms[0].ciudad, 'cs')};
 

[Fernarey1810]

HOLA YO DE NUEVO. YA SOLUCIONE EL PROBLEMA. PERO AHORA NO ME ANDA ESTO.

Código Javascript:

document.getElementById("nombre").onkeypress = function() { permite(event,'num_car',15,'nombre'); }
 

Código HTML:

<input type="text" id="nombre" name="idUsuario" value="<?php if (isset($_POST['idUsuario'])) echo htmlspecialchars($_POST['idUsuario']); ?>">
 

Este es el input. Ahora LO Q FALLA ES event (Error: event is not defined). Yo tomo los datos de esa funcion asi

Código Javascript:

function permite(elEvento, permitidos, maxCaracter, nombreId) { 
    var elemento = document.getElementById(nombreId);            
    .....
    .....
    .....
}
 

Como hago para q pase EVENT???

[zerokilled]

intentando creando un argumento con nombre event para la funcion anonima. es decir,

Código:

elemento.evento = function(event){
...
} 

[Fernarey1810]

Pero es q hago eso fijate

Código Javascript:

document.getElementById("nombre").onkeypress = function() { permite(event,'num_car',15,'nombre'); }
 

AHI ESTA EVENT VES?.

[David]

Pero debes pasarlo como parámetro a la función anónima, cosa que en tu código no estás haciendo. Aplica el ejemplo que te mostró zerokilled.

[Fernarey1810]

Lo probe de estas 2 formas y no me funciona. tenes idea q puede ser?

Código Javascript:

document.getElementById("nombre").onkeypress = function(event) { permite('num_car',15,'nombre'); }  
Error: elevento is null
 

function permite(elEvento, permitidos, maxCaracter, nombreId) {
var elemento = document.getElementById(nombreId);
}



De esta forma no me tira error, pero no funciona el codigo.

Código Javascript:

document.getElementById("nombre").onkeypress = function(event) { permite(event,'num_car',15,'nombre'); }
 

[David]

De la segunda forma debería funcionar. ¿Cuál es el código completo de la función permite()?

[Fernarey1810]

Antes esta esto por las dudas q haga fallar algo.

Código Javascript:

window.onload = function() {
    // Declaración de manejadores semánticos
    // Funciones externas
        document.getElementById("nombre").onfocus = function() { muestraOculta(1,'nombre'); }
        
    document.getElementById("nombre").onkeyup = function() { actualizaInfo(15, 1,'nombre'); }
 
        document.getElementById("nombre").onkeypress = function(event) { permite(event,'num_car',15,'nombre'); }            
    
    Calendar.setup({
        inputField: "fecha",
        ifFormat: "%d-%m-%Y",
        button: "selector"
    }); initListGroup('paises', document.forms[0].pais, document.forms[0].provincia, document.forms[0].ciudad, 'cs');
}
 

Código Javascript:

function permite(elEvento, permitidos, maxCaracter, nombreId) { 
    var elemento = document.getElementById(nombreId);            
    // Variables que definen los caracteres permitidos
    var numeros = "0123456789";
    var caracteres = " @abcdefghijklmnñopqrstuvwxyzABCDEFGHIJKLMNÑOPQRSTUVWXYZ";
    var numeros_caracteres = numeros + caracteres;
    var teclas_especiales = [8, 9, 13, 35, 36, 37, 39, 46, 95];
    // 8= Espacio, 46= Supr, 37= Flecha Izquierda, 39= Flecha Derecha 95= Guión bajo        
    // Seleccionar los caracteres permitidos 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;
    }
    // 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     
    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 entre los caracteres permitidos
    // o si es una tecla especial
    if (elemento.value.length >= maxCaracter) {
        return tecla_especial;          
        return false;
    } else
        return permitidos.indexOf(caracter) != -1 || tecla_especial;
}