Establecer el valor predeterminado para el campo de búsqueda - ¡Ayuda!

Question

Estoy tratando de establecer un valor predeterminado para un campo de búsqueda. La idea es que el campo de búsqueda tenga el valor & Quot; Buscar & Quot; hasta que el usuario haga clic en él, entonces debería estar vacío. Además, siempre que sea & "; En blanco &"; (con " Buscar " como valor) debe tener la clase " .blank " ;.

Probé esto

<input autocomplete="off" class="" id="searchq" name="searchq" onblur="if (this.value == '') { this.value='Search'; jQuery(this).addClass('blank'); };" onfocus="if (this.value == 'Search') { this.value=''; jQuery(this).removeClass('blank'); };" type="text" value="" />

funciona hasta ahora, pero cuando cargo el sitio, el campo está vacío. Primero tengo que hacer clic dentro del campo y luego en algún lugar de la página para que el efecto funcione.

Supongo que tiene algo que ver con onBlur. ¿Alguna idea?

¡Gracias!

Answer 1

Esto se conoce como marca de agua. ver http://digitalbush.com/projects/watermark-input-plugin/ por ejemplo

Answer 2

Otra idea es poner marcadores de posición en sus tipos de entrada: (Tenga en cuenta que esto es HTML5).

<input type=text placeholder="Default text here"/>

de esta manera el campo de texto se mostrará en un color de texto gris: texto predeterminado aquí. Una vez que haga clic, eliminará el texto y lo reemplazará con su texto actual y cuando esté vacío volverá.

Answer 3

Simplemente dale el valor predeterminado 'Buscar' codificado, como en

<input ... type="text" value="Search" />

Answer 4

Parece que solo necesita establecer el valor inicial en Search, directamente en la etiqueta de entrada, así:

<input autocomplete="off" class="blank" id="searchq" name="searchq" onblur="if (this.value == '') { this.value='Search'; jQuery(this).addClass('blank'); };" onfocus="if (this.value == 'Search') { this.value=''; jQuery(this).removeClass('blank'); };" type="text" value="Search" />

Tenga en cuenta que también establecemos la clase inicial en blank también.

Answer 5

Encontré el problema, mi error: se llama a onBlur, cuando el usuario hace clic en otro lugar. onLoad solo está permitido para las etiquetas BODY y FRAMESET. La solución es establecer el valor predeterminado en algún lugar del servidor (para mí en application_controller, si no se envía un término de búsqueda).

¡Gracias de todos modos!

Answer 6

el desenfoque es cuando un campo pierde el foco, no puede perder el foco hasta que tenga foco para empezar, por lo tanto, debe hacer clic en el campo y luego hacer clic para verlo funcionando. ¿Has intentado configurar la clase a .blank por defecto?

<input autocomplete="off" class="blank" ....

Answer 7

Aquí hay un fragmento que utilizo para hacer esto. Puede haber formas más simples, pero esto funciona. Cualquier elemento con la clase .cleardefault tendrá su valor borrado en el primer mouseover. Cualquier elemento con la clase .setcleardefault borrará el valor predeterminado y, si el usuario no ha puesto nada en el cuadro, lo restablecerá al valor predeterminado al salir del mouse.

function ClearDefault(item) {
    // clear the default value of a form element
    if (item.defaultValue == undefined)
        item.defaultValue = item.value;
    if (item.defaultValue == item.value)
        item.value = '';
} // ClearDefault

function SetDefault(item) {
    // if item is empty, restore the default value
    if (item.value == '')
        item.value = item.defaultValue;
} // SetDefault

$(document).ready(function() {
    $(".cleardefault")
        .mouseover(function(){
            ClearDefault(this);
        })
    $(".setcleardefault")
        .mouseover(function(){
            ClearDefault(this);
        })
        .mouseout(function(){
            SetDefault(this);
        });
    /*
    */
});