Onblur con condiciones - Hiperdificil

salbatore · #1 (**permalink**) 08/09/2008, 22:13

Hola, foreros:

Tengo un problemilla con onBlur, jeje. Tengo dos input's, uno de ellos tiene un fondo rojo que al pinchar en el pasa a tener un fondo azul, por medio de la funcion "azul()" en onfocus, eso funciona perfectamente. Tambien tiene con la funcion onBlur otra funcion con la que vuelve a cambiar el color a rojo si se sale de el, con el siguiente codigo:

Código HTML:

<input id="primero"  type="text" onFocus="search_change_color_blur()" onBlur="search_change_color_red()" />
<input id="segundo"  type="text"/>

Mi problema es el siguiente:

Ahora si se clica en el primer input este pasa de rojo a azul, y si se sale de el vuelve a rojo. Perfecto. Pero quiero que si se clica en el otro input la funcion onBlur del primer input no se ejecute, es decir, que se quede con el mismo color.

¿Es posible?

Panino5001 · #2 (**permalink**) 09/09/2008, 00:20

No sé si te entendí. 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>

.rojo{ background-color:red}

.azul{ background-color:blue}

input{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; color:#FFF }

</style>

<script>

/*----lib----*/

function $(id){return document.getElementById(id);}

function addEvent(obj, evType, fn, useCapture){

 if (obj.addEventListener){

    obj.addEventListener(evType, fn, useCapture);

  } else if (obj.attachEvent){

      var f=function(){

        fn.call(obj,window.event);

    }

    obj.attachEvent("on"+evType, f);

  } else {

   obj['on'+evType]=fn;

  }

} 

/*----lib----*/

function rojo(){

    if(window.ultimo){

        window.ultimo.className='rojo';

    }

    this.className='rojo';

    window.ultimo=null;

}

function azul(){

    this.className='azul';

    var el=document.getElementsByTagName('input');

    for(var i=0,l=el.length;i<l;i++){

        if(el[i]== window.ultimo)

            continue;

        el[i].className='azul';

    }

    window.ultimo=this;

 
}

function asignar(){

    var el=document.getElementsByTagName('input');

    for(var i=0,l=el.length;i<l;i++){

        addEvent(el[i], 'focus', rojo, false);

        addEvent(el[i], 'blur', azul, false);

    }

}

window.onload=asignar;

</script>

</head>

 
<body>

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

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

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

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

</form>

</body>

</html>

salbatore · #3 (**permalink**) 09/09/2008, 04:32

Hola, Panino5001,

Menudo crack, jeje... menuda entrega...

Funciona perfectamente... ahora intentare comprenderlo poco a poco... buff, jeje... he intentado darte mas karma, pero me dice que lo debo esparcir mas, jeje... es que estas en todas!.

Bueno... no se como agradecerte la ayuda.

Panino5001 · #4 (**permalink**) 09/09/2008, 06:27

Me alegra que te sirva ;)