Javascript no intrusivo

salbatore · #1 (**permalink**) 04/11/2008, 14:59

Hola, foreros:

De nuevo estoy con el javascript no intrusivo algo liado, jeje. Como puedo hacer que todos los input's que tengan class='input_rojo' cuando se seleccionen (onfocus) se ejecute una accion?

David · #2 (**permalink**) 04/11/2008, 15:25

Si no mal lo recuerdo había un Framework que te permitía hacerlo (creo que era jQuery), aunque manualmente también puedes hacerlo, si buscas en el foro no hace mucho tiempo caricatos puso un código de cómo buscar un elemeto por su clase, puedes usar su código (aunque habría que adaptarlo para que busque todos los elementos con esa clase) para asignar los eventos.

Panino5001 · #3 (**permalink**) 04/11/2008, 16:51

Fijate si te sirve:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>test</title>

<style>

.input_rojo{border:1px solid red;}

</style>

<script type="text/javascript">

/* ---- credits: Dustin Díaz ---- */

function getElementsByClass(searchClass,node,tag) {

        var classElements = new Array();

        if ( node == null )

                node = document;

        if ( tag == null )

                tag = '*';

        var els = node.getElementsByTagName(tag);

        var elsLen = els.length;

        var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");

        for (i = 0, j = 0; i < elsLen; i++) {

                if ( pattern.test(els[i].className) ) {

                        classElements[j] = els[i];

                        j++;

                }

        }

        return classElements;

}

function addEvent(o,t,f){

    if(o.addEventListener){

        o.addEventListener(t,f,false);

    }else if(o.attachEvent){

        var fn=function(){

            f.call(o,window.event);

        }

        o.attachEvent('on'+t,fn);

    }else

        throw 'No se puede asignar el evento.';

}

var laFuncion=function(){alert(this.name);}

onload=function(){

    var col=getElementsByClass('input_rojo',null,'input');

    for(var i in col){

        addEvent(col[i],'focus',laFuncion);

    }

}

</script>

</head>

 
<body>

<form id="form1" name="form1" method="post" action="">

  <input class="input_rojo" type="text" name="textfield" />

  <input type="text" name="textfield2" />

  <input class="input_rojo" type="text" name="textfield3" />

  <input type="text" name="textfield4" />

  <input class="input_rojo" type="submit" name="Submit" value="Enviar" />

</form>

</body>

</html>

salbatore · #4 (**permalink**) 04/11/2008, 17:34

Hola Panino5001:

Muchas gracias!... el codigo funciona perfectamente... ahora tendre que estudiarlo... pues casi me suena a chino, jeje

Gracias como siempre!.

hugozap · #5 (**permalink**) 04/11/2008, 22:37

Usando la poderosa libreria YUI seria tan facil como

var Dom = YAHOO.util.Dom;
var elementos = Dom.getElementsByClassName("clase","input");

Y luego ya es jugar con el array que retorna.

salbatore · #6 (**permalink**) 05/12/2008, 14:45

Hola de nuevo...

Se que ha pasado un tiempo, jeje, desde que abri este post, pero me han surgido nuevas dudas sobre el codigo que posteo Panino5001, jeje.

El codigo funciona super bien para lo que queria hacer, jeje. Pero ahora buscaba hacer otra cosa, que no se si es posible.

¿Como puedo seleccionar los objetos por medio de un array?, creo que se dice asi, jeje. Me explico, jeje, tengo que seleccionar todos los valores de todos los campos de mi web de una determinada clase, como lo hace la funcion que Panino5001 me escribio, pero lo que busco ahora es seleccionar por ejemplo el segundo elemento que sea del tipo y clase seleccionarda.

Como lo haria en php, pero en javascript:

Código PHP:

  campo_seleccionado[1];

¿Se puede hacer o tengo que usar otra funcion?

David · #7 (**permalink**) 05/12/2008, 15:12

Si te fijas, es justamente eso lo que hace el código. El valor de retorno de la función getElementsByClass es un array, por lo que puedes tomar ese valor y manejarlo de la forma valor[0], valor[1]....

salbatore · #8 (**permalink**) 05/12/2008, 16:01

Hola, David el Grande,

Muchas gracias... al final toqueteando un poco me salio bien... jejeje. Menos mal que os tengo... sino me veo haciendo una web con word... jeje.

Bueno... grachias David!.