Texto ‘Buscar’ por defecto

douglas.velasquez

¿Cómo hacerlo?

Ejemplo 1

Colocamos un texto por defecto en la casilla de texto del buscador.

Al cargar la página se coloca un texto por defecto (atributo «default») en la casilla de texto si esta se encuentra vacía.

  • Al hacer clic en la casilla de texto, se quita el texto por defecto.
  • Cuando se deja la casilla de texto (eveto «blur»), se verifica el valor (atributo «value») de esta y si no se introdujo texto alguno se coloca el texto por defecto (atributo «default»).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    function init_input_search(input_id){
      input = $('input#'+input_id);
      if(input.length > 0){
        default_text = input.attr('default');
        if(default_text == 'undefined'){
          default_text = '';
        }
        if(default_text != '' &amp;&amp; input.val() == ''){
          input.val(default_text);
        }
      }
 
      input.click(function(e){
        if($(this).val() == default_text){
          $(this).val('');
        }
      });
 
      input.blur(function(e){
        if($(this).val() == ''){
          $(this).val(default_text);
        }
      });
 
      input.parents('form').submit(function(e){
        $('input', $(this)).each(function(){
          if($(this).val() == $(this).attr('default')){
            $(this).val('');
          }
        });
      });
    }
 
    init_input_search('search_by');
  });
</script>

Explicación

Deseo saber cómo funciona

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<script type="text/javascript" src="ruta/al/archivo/jquery"></script>
<script type="text/javascript">
  $(document).ready(function(){
    function init_input_search(input_id){
      input = $('input#'+input_id);
      // verificamos si la casilla de texto con el 'id' indicado existe
      if(input.length > 0){
        // obtenemos el valor del atributo'default'
        default_text = input.attr('default');
        if(default_text == 'undefined'){
          default_text = '';
        }
        // evaluamos que se haya definido un texto por defecto para mostrar en caso
        // que la casilla de texto este en blanco; si es asi lo colocamos como valor de
        // la casilla de texto
        if(default_text != '' &amp;&amp; input.val() == ''){
          input.val(default_text);
        }
      }
 
      // si se hace clic en la casilla de texto, se quita el texto por  defecto colocado al
      // cargar la página
      input.click(function(e){
        if($(this).val() == default_text){
          $(this).val('');
        }
      });
 
      // cuando la casilla de texto se deja, colocamos el texto por defecto solo en caso
      // que esta haya sido dejada en blanco
      input.blur(function(e){
        if(default_text != '' &amp;&amp; $(this).val() == ''){
          $(this).val(default_text);
        }
      });
    }
 
      // antes de enviar el formulario limpiamos la casilla de texto si al enviar el formuario
      // contiene el texto por defecto
      input.parents('form').submit(function(e){
        $('input', $(this)).each(function(){
          if($(this).val() == $(this).attr('default')){
            $(this).val('');
          }
        });
      });
 
    // inicializamos la casilla de texto
    init_input_search('search_by');
  });
</script>

¿Necesitas otro ejemplo?

Si necesitas otro ejemplo (uno más real), puedes dejar un comentario indicando tu solicitud, acerca de lo que quisieras que elaboraramos, y con gusto contestaremos tu solicitud.

Post relacionados:

Categories: Jquery