Asignar varios eventos a un elemento html

link01 · #1 (**permalink**) 26/07/2012, 16:46

Normalmente lo que se hace es:

Código HTML:

Ver original<button type="button" onclick="return funcion()">Boton </button>

Pero si hago lo siguiente:

Código HTML:

Ver original<button type="button" onclick="return funcion1(); return funcion2();">Boton </button>

No funciona.

Lo que pasa es que tengo varios inputs en lo que me gustaria limitar, el numero de caracteres que se escriba y tambien el tipo de caracteres (si son letras o numeros). Hay algunos inputs en los que es necesario validar ambas cosas, en otros no, por eso son dos funciones diferentes.

¿Cómo podría hacerlo?

Intenté el el método attachEvento, pero tampoco funciona:

Código Javascript:

Ver originalinput.attachEvent("onkeypress", soloLetras(event, this, 'numero'));

Código Javascript:

Ver originalinput.attachEvent("onkeypress", new function() {
return soloLetras(event, this, 'numero')
});

Código Javascript:

Ver originalinput.attachEvent("onkeypress", return new function() {
soloLetras(event, this, 'numero')
});

Ninguno funcionan.

lubtufano · #2 (**permalink**) 26/07/2012, 16:52

¿No te serviría utilizar una tercera función que llamara a las otras dos? Algo así.

<script>
function funcion01()
{
...
}

function funcion02()
{
...
}

function funcion03()
{
funcion01();
funcion02();
}
</script>

<input type="button" onclick="funcion03()" />

link01 · #3 (**permalink**) 26/07/2012, 17:01

Si, esa era la solución alternativa, pero quería saber si había una forma "legal" o sea una forma provista por los mismos lenguajes.

Dradi7 · #4 (**permalink**) 26/07/2012, 17:03

No entiendo a que te refieres con provista los mismos lenguajes (PHP, ASPX, JAVA) y en cuanto a validar la longitud de caracteres no puedes usar la propiedad maxlenght del HTMLElement.

link01 · #5 (**permalink**) 26/07/2012, 17:22

Podria usar el maxlength, pero quiero dar un mensaje cuando ya no se pueda seguir escribiendo, y no veo como pueda hacer eso con maxlength.

Volviendo al problema, tengo un error al llamar las dos funciones. Me dice que una de la funciones que estoy llamando no es una funcion

Asi es como lo estoy haciendo.

Código Javascript:

Ver originalfunction detener(txt, cantidad) {
    // alert(txt.value.length);
    retorno = true;
    if(txt.value.length >= cantidad) {
        retorno = false;
    }
    
    return retorno;
}

Código Javascript:

Ver originalfunction soloLetras(elEvento, objeto, tipo)
{
    permite = true;
    
    letras = "abcdefghijklmnñopqrstuvwxyz ";
    numeros = "0123456789";
    especiales = [ "8", "9", "39", "37"]
 
    evento = elEvento;
    
    caracter = String.fromCharCode(evento.charCode);
. ..
..
..
..
}

Código Javascript:

Ver originalfunction detenerYsoloLetra(elEvento, objeto, tipoCaracter, cantidadCaracteres) {
    
    soloLetras = soloLetras(elEvento, objeto, tipoCaracter);
    detener = detener(objeto, cantidadCaracteres);
    
    if(soloLetras && detener) {
        return true;
    }
    else {
        return false;
    }
}

El html

Código Javascript:

Ver original<input type="text" id="cedula" onkeypress="return detenerYsoloLetra(event, this, 'letra', 11)"/> <span class="requerido">*</span>

El error es:

Uncaught TypeError: Property 'soloLetras' of object [object Window] is not a function

furoya · #6 (**permalink**) 27/07/2012, 11:34

Bueno, en los ejemplos que pusiste para probar seguro que da error, porque esos puntos de relleno no hacen nada para la función. Podías haber dejado algo listo para ver.

Hice un modelo muy simple, que llama a una función que es la que "valida" con otras dos (en realidad no validan nada, le puse unos checkbox para que se pudiese probar entre true y false y confirmé con alertas que recibieran los valores de la función original).

Funciona bien. O al menos eso parece. Si tienes un aviso en la consola debe ser por errores en las otras funciones.

Te dejo el demo para que lo verifiques.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">

<script type="text/javascript">

function dobleFuncion(T,R,A){
alert(T.value+" "+R+" "+A)
var charly = delta(T,R);
var eco = foxtrot(T,A);
//alert(charly);
//alert(eco);
var golf = (charly==true && eco==true)? true : false;

//return golf;

alert("Es : "+ golf)
}

function delta(Td,Rd){
alert("En delta() : "+Td.value+" "+Rd)

var hotel = julieta.alfa.value == "1"? true:false;
alert("delta : "+ hotel +" ("+ Td.value +" "+ Rd +")");
return hotel;
}

function foxtrot(Tf,Rf){
alert("En foxtrot() : "+Tf.value+" "+Rf)

var indio = julieta.bravo.value == "1"? true:false;
alert("foxtrot : "+ indio +" ("+ Tf.value +" "+ Rf +")");
return indio;
}

</script>

</head>
<body>
<form name=julieta>
<p style=background-color:#ff9999 ><input type=checkbox value="0" name=alfa 
onchange="this.value=(this.checked)? '1':'0'"> ☑True / ☐False.</p>
<p style=background-color:#9999ff ><input type=checkbox value="0" name=bravo 
onchange="this.value=(this.checked)? '1':'0'"> ☑True / ☐False.</p>

<input type=button onclick='dobleFuncion(this,"rojo","azul")' value="Devuelve...">
</form>
</body>
</html>

Si el rojo y el azul están checkeados, devuelve true. De cualquier otra forma, devuelve false.