Ayda con formulario Js html css

[jesusmac]

Necesito una pequeña ayuda estoy haciendo un formulario de busqueda parecido al de twitter pero soy algo novato con el javascript , bueno aqui esta el codigo que llevo hecho.

Código HTML:

<style>
#buscador {

float:left;padding:0px 0px 0px 2px;

/* Ponemos los bordes para el formulario */

border: 1px solid #000000 ;border-bottom: 1.5px solid #000000 ;

/* Ponemos el color de fondo  */

background-color:	#696969;margin:4px 0px 0px 20px;

/* Redondeamos esquinas */

-moz-border-radius: 4px;	-webkit-border-radius: 4px;border-radius: 4px}
</style>

<form id="buscador" action="buscar.php" 

/* Indicamos lo que pasara el poner el puntero sobre el formulario */

onMouseOver="this.style.background='#808080';"

/*Indicamos lo que pasara al sacar el puntero del formulario */

onMouseOut="this.style.background='#696969';"

style="margin:6px 0px 0px 5px;" 

metod="get">


<input  

/* INDICAMOS LO QUE PASARA AL QUITAR EL FOCO DEL AREA DE TEXTO */

onblur="form.style.background='#696969';this.value='Buscar personas...';"

/* INDICAMOS LO QUE PASARA AL OCURRIR UN FOCO EN EL AREA DE TEXTO  */

onFocus="form.style.background='#ffffff';this.value=' ';"

value="Buscar personas..."
style="margin:0px;width:172px;border-style:none;background-color:transparent;padding:5px;"

name="busqueda" type="text" />

<input type="image" style="height:20px;padding:3px 5px 3px 5px;margin:0px 0px -8px 0px;" src="http://icones.pro/es/go.php?http://icdn.pro/images/es/b/u/buscar-buscar-ampliar-icono-6707-16.png" />

</form>

El problema no se como hacer para que cuando este en foco permanesca el fondo de color blanco .

[ocp001a]

Si quieres cambiar el color de un campo cuando tiene el foco, puedes hacerlo con css

:focus{background-color:#fff;}

o bien mediante javascript (no lo recomendaria tanto)

<input type="text" onfocus=("this.style.backgroundColor='#fff';")>

[jesusmac]

Iniciado por ocp001a

Si quieres cambiar el color de un campo cuando tiene el foco, puedes hacerlo con css

:focus{background-color:#fff;}

o bien mediante javascript (no lo recomendaria tanto)

<input type="text" onfocus=("this.style.backgroundColor='#fff';")>

muy bien compa eso ya lo sabia mi problema es que cuando esta en foco , al sacar el mouse del cuadro de texto el area vuelve a su color normal

[InKarC]

Necesita hacer el cambio si el color no es blanco en mouseover y mouseout, osea con un if decidir si debe cambiar de color. (chequelo aca)

Código HTML:

onMouseOver="if(this.style.background != '#ffffff' && this.style.background != 'rgb(255, 255, 255)'){this.style.background='#808080'};"
 
onMouseOut="if(this.style.background != '#ffffff' && this.style.background != 'rgb(255, 255, 255)'){this.style.background='#696969';}"
 

PD: Por cierto esos comentarios dentro de un <input> no se pueden hacer, y los caracteres /* son para comentarios CSS y JS, no para HTML como tal, para eso es <!-- asi -->

[jesusmac]

Iniciado por InKarC

Necesita hacer el cambio si el color no es blanco en mouseover y mouseout, osea con un if decidir si debe cambiar de color. ([URL="http://jsfiddle.net/qHY3Y/"]chequelo aca[/URL])

Código HTML:

onMouseOver="if(this.style.background != '#ffffff' && this.style.background != 'rgb(255, 255, 255)'){this.style.background='#808080'};"
 
onMouseOut="if(this.style.background != '#ffffff' && this.style.background != 'rgb(255, 255, 255)'){this.style.background='#696969';}"
 

PD: Por cierto esos comentarios dentro de un <input> no se pueden hacer, y los caracteres /* son para comentarios CSS y JS, no para HTML como tal, para eso es <!-- asi -->

Gracias , eso es a lo que me referia , por cierto lo de los comentarios html ya lo sabia pero al ponerlos el codigo no funcionaba.

Compa parece que se me adelanto , xD acabo casi todo el codigo

[jesusmac]

Todavia no se soluciona lo del Focus :/

[InKarC]

Si lo vio en fiddle? http://jsfiddle.net/qHY3Y/ hay esta lo de foucs trabajando bastante bien

[jesusmac]

Iniciado por InKarC

Si lo vio en fiddle? [url]http://jsfiddle.net/qHY3Y/[/url] hay esta lo de foucs trabajando bastante bien

Si compa pero no cumplia con lo que yo queria , he modificado el codigo y quedo asi :

Código HTML:

<style>#buscador , #hover , #foco  , #hover {

float:left;padding:0px 0px 0px 2px;

/* Ponemos los bordes para el formulario */

border: 1px solid #000000 ;border-bottom: 1.5px solid #000000 ;

margin:4px 0px 0px 20px;

/* Redondeamos esquinas */

-moz-border-radius: 4px;    -webkit-border-radius: 4px;border-radius: 4px}</style>

<form id="buscador" style="background-color:#696969;" action="buscar.php"

onMouseOver="if(this.id=='buscador'){this.style.background='#808080' , this.id='hover'} else{if(this.id=='hover'){this.style.background='#808080' , this.id=='buscador'}} "

onMouseOut="if(this.id=='hover'){this.style.background='#696969' , this.id=='buscador'}"

style="margin:6px 0px 0px 5px;"

metod="get">


<input  

onblur="form.id='buscador';form.style.background='#696969';if(this.value==''){this.value='Buscar personas...'};form.id=='buscador'"

onFocus="form.id='foco';form.style.background='#ffffff';if(this.value=='Buscar personas...'){this.value=''};

"

value="Buscar personas..."
style="margin:0px;width:172px;border-style:none;background-color:transparent;padding:5px;"

name="busqueda" type="text" />

<input type="image" style="height:20px;padding:3px 5px 3px 5px;margin:0px 0px -8px 0px;" src="http://icones.pro/es/go.php?http://icdn.pro/images/es/b/u/buscar-buscar-ampliar-icono-6707-16.png" />

</form> 

Puede ver el ejemplo funcionando en : http://jsfiddle.net/qHY3Y/39/ xD

Gracias por su ayuda (: