memoria input

[marcvilap]

Buenas compañeros,

tengo un problema con el input de un buscador. El buscador es igual al que utiliza aquí forosdelweb ( con la imagen de google de fondo). Es decir cuando el valor de input es nulo se ve la imagen de fondo, pero cuando hay un valor se ve el valor y no la imagen de fondo. Hasta aquí todo OK.

El problema aparece cuando el usuario introduce un campo en el input , realiza la busqueda y por lo que sea retrocede otra vez a la pagina inicial donde esta el input. Cuando esto sucede en el input salen las dos cosas solapadas ( La imagen de fondo y el texto que el usuario ha introducido ) .

Pongo el codigo del input

<INPUT TYPE="text" NAME="busqueda" onload.this.value='' style="background:url(Imagenes/palabra.jpg)" onfocus = "this.style.background=''"onblur = "if(this.value=='') this.style.background='url(Imagenes/palabra.jpg)'">

A ver si a alguien se le ocurre algo para solucionar el tema

Gracias

[David]

En el evento onload de la página puedes limpiar el input o verificar su estado para quitar la imagen.

[buzu]

la cosa es que cuando cargas la página no se activa el evento blur del campo de texto y tu el cambio lo haces al capturar dicho evento.

Tienes varias opciones. David (hola) ya te sugirió dos, ahora veamos cual realmente funciona. Limpiar el input no es realmente una buena idea. Puede ser que el usuario quiera modificar la entrada para refinar su búsqueda. Dejar la entrada ahí le da la oportunidad de no tener que re introducir todo el texto nuevamente.

Verificar el estado del input suena un poco mejor. Si el input tiene algún valor no muestras el fondo, de otra manera lo muestras.

Una tercera opción es activar el blur del input (blur()). No estoy seguro que esto active el evento blur, pero puedes probar.

Hasta ahora la opción de checar el estado del input al cargar la página parece la mejor. Ahora, como hacerlo?

Simple:

Código javascript:

window.onload = function(){
     if(document.getElementById('idDeTuInput').value==''){
           document.getElementById('idDeTuInput').style.backgroundImage= 'url(Imagenes/palabra.jpg);
     }else{
            document.getElementById('idDeTuInput').style.backgroundImage= '';
     }
}
 

Por supuesto que esta función es solo un prototipo y hay mejores formas de hacerlo, pero te puede servir como guía.