Volver al Foro de Diseño de páginas Web

cuadro de búsqueda de marca de agua

  • tastysite
  • Proficient
  • Proficient
  • Avatar de Usuario
  • Registrado: Abr 09, 2008
  • Mensajes: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Nota Noviembre 28th, 2009, 10:19 am

Quiero tener un cuadro de texto que tiene un texto en el que dicen cuadro de búsqueda de y cuando hace clic en él se aclara a continuación, puede buscar algo. Pero si el cuadro es claro, entonces volverá a escribir las palabras cuadro de búsqueda de de nuevo, también cuando escribo en un término y luego haga clic en el término que yo no lo quiero aclarar que he estado tratando de hacerlo usando javascript, pero no llegó muy lejos.
Esto es lo que tengo
Código: [ Select ]
<input type="text" name="learnBox" id="learnBox" onclick="this.value=''" value="Enter a subject, video title or video ID" />
^__^
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Noviembre 28th, 2009, 10:19 am

  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Registrado: Feb 10, 2004
  • Mensajes: 13455
  • Loc: Florida
  • Status: Offline

Nota Noviembre 28th, 2009, 11:22 am

¿Está utilizando todo tipo de bibliotecas JavaScript, como jQuery, Prototype, etc en sus páginas ya?
Strong with this one, the sudo is.
  • tastysite
  • Proficient
  • Proficient
  • Avatar de Usuario
  • Registrado: Abr 09, 2008
  • Mensajes: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Nota Noviembre 28th, 2009, 11:50 am

no en este momento - JavaScript es un poco un desconocido para mí im acaba de empezar con ella.
^__^
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Registrado: Feb 10, 2004
  • Mensajes: 13455
  • Loc: Florida
  • Status: Offline

Nota Noviembre 28th, 2009, 12:17 pm

Usted querrá usar el "onfocus" y "onblur" eventos heredados en lugar de "onclick" evento legado.

Los incendios se centran caso cuando alguien selecciona el cuadro de texto para hacer una edición, y el desenfoque desencadena el evento cuando theyre no editarlo.

HTML Código: [ Select ]
<input type="text" name="learnBox" id="learnBox" value="" />
<script type="text/javascript">
var default_lb = 'Enter a subject, video title or video ID';
var lb = document.getElementById('learnBox');
lb.value = default_lb;
lb.onfocus = function()
{
   if(lb.value == default_lb)
   {
      lb.value = '';
   }
}
lb.onblur = function()
{
   if(lb.value == '')
   {
      lb.value = default_lb;
   }
}
</script>
  1. <input type="text" name="learnBox" id="learnBox" value="" />
  2. <script type="text/javascript">
  3. var default_lb = 'Enter a subject, video title or video ID';
  4. var lb = document.getElementById('learnBox');
  5. lb.value = default_lb;
  6. lb.onfocus = function()
  7. {
  8.    if(lb.value == default_lb)
  9.    {
  10.       lb.value = '';
  11.    }
  12. }
  13. lb.onblur = function()
  14. {
  15.    if(lb.value == '')
  16.    {
  17.       lb.value = default_lb;
  18.    }
  19. }
  20. </script>
Strong with this one, the sudo is.
  • ultimate11
  • Student
  • Student
  • No Avatar
  • Registrado: Feb 02, 2011
  • Mensajes: 86
  • Status: Offline

Nota Julio 31st, 2011, 10:05 pm

hay chicos es mucho más simple...:mrgreen:
Código: [ Select ]
<input type="text" name="learnBox" onfocus="this.value=''" onblur="this.value='Search'" value="Search"/>
  • Poly
  • Guru
  • Guru
  • Avatar de Usuario
  • Registrado: Jul 31, 2004
  • Mensajes: 1054
  • Loc: Same place you left me.
  • Status: Offline

Nota Agosto 3rd, 2011, 5:34 pm

Utilizar el marcador de posición.

Código: [ Select ]
<input type="text" id="search" placeholder="Search..." />


Soporte de navegador
Chrome
Firefox 3.7 +
Internet Explorer 9 +
Avant Browser(Not sure)
Opera (en algún lugar alrededor de 11 v)
Safari 4 +

Obviamente no todo el mundo está ejecutando un explorador HTML5, todavía, por lo que se va a necesitar falsificar para los exploradores de otros, inferiores.

Añadir esto a la cabeza de cada página, o agregar a una secuencia de comandos separado y llamar en cada página:
Código: [ Select ]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
// This adds 'placeholder' to the items listed in the jQuery .support object.
jQuery(function() {
  jQuery.support.placeholder = false;
  test = document.createElement('input');
  if('placeholder' in test) jQuery.support.placeholder = true;
});
// This adds placeholder support to browsers that wouldn't otherwise support it.
$(function() {
  if(!$.support.placeholder) {
   var active = document.activeElement;
   $(':text').focus(function () {
     if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
      $(this).val('').removeClass('hasPlaceholder');
     }
   }).blur(function () {
     if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
      $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
     }
   });
   $(':text').blur();
   $(active).focus();
   $('form:eq(0)').submit(function () {
     $(':text.hasPlaceholder').val('');
   });
  }
});
</script>
<style>
.hasPlaceholder {
  color: #777;
}
</style>
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  2. <script>
  3. // This adds 'placeholder' to the items listed in the jQuery .support object.
  4. jQuery(function() {
  5.   jQuery.support.placeholder = false;
  6.   test = document.createElement('input');
  7.   if('placeholder' in test) jQuery.support.placeholder = true;
  8. });
  9. // This adds placeholder support to browsers that wouldn't otherwise support it.
  10. $(function() {
  11.   if(!$.support.placeholder) {
  12.    var active = document.activeElement;
  13.    $(':text').focus(function () {
  14.      if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
  15.       $(this).val('').removeClass('hasPlaceholder');
  16.      }
  17.    }).blur(function () {
  18.      if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
  19.       $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
  20.      }
  21.    });
  22.    $(':text').blur();
  23.    $(active).focus();
  24.    $('form:eq(0)').submit(function () {
  25.      $(':text.hasPlaceholder').val('');
  26.    });
  27.   }
  28. });
  29. </script>
  30. <style>
  31. .hasPlaceholder {
  32.   color: #777;
  33. }
  34. </style>


Lo que el código anterior hace, es comprobar si el navegador es compatible con el marcador de posición. Si no es así, imita el efecto mediante CSS. El valor de color dentro de .hasplaceholder es el color del texto de marcador de posición falsificado dentro de su cuadro de texto. #777 es el valor predeterminado de marcador de posición.

Ahora cada explorador que admite CSS puede utilizar esta función.


Un ejemplo completo:
Código: [ Select ]
<html>
<head>
<title>Placeholder Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
// This adds 'placeholder' to the items listed in the jQuery .support object.
jQuery(function() {
  jQuery.support.placeholder = false;
  test = document.createElement('input');
  if('placeholder' in test) jQuery.support.placeholder = true;
});
// This adds placeholder support to browsers that wouldn't otherwise support it.
$(function() {
  if(!$.support.placeholder) {
   var active = document.activeElement;
   $(':text').focus(function () {
     if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
      $(this).val('').removeClass('hasPlaceholder');
     }
   }).blur(function () {
     if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
      $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
     }
   });
   $(':text').blur();
   $(active).focus();
   $('form:eq(0)').submit(function () {
     $(':text.hasPlaceholder').val('');
   });
  }
});
</script>
<style>
.hasPlaceholder {
  color: #777;
}
</style>
</head>
<body>
   <input type="text" name="search" placeholder="Search here..." /> 
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Placeholder Example</title>
  4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  5. <script>
  6. // This adds 'placeholder' to the items listed in the jQuery .support object.
  7. jQuery(function() {
  8.   jQuery.support.placeholder = false;
  9.   test = document.createElement('input');
  10.   if('placeholder' in test) jQuery.support.placeholder = true;
  11. });
  12. // This adds placeholder support to browsers that wouldn't otherwise support it.
  13. $(function() {
  14.   if(!$.support.placeholder) {
  15.    var active = document.activeElement;
  16.    $(':text').focus(function () {
  17.      if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
  18.       $(this).val('').removeClass('hasPlaceholder');
  19.      }
  20.    }).blur(function () {
  21.      if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
  22.       $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
  23.      }
  24.    });
  25.    $(':text').blur();
  26.    $(active).focus();
  27.    $('form:eq(0)').submit(function () {
  28.      $(':text.hasPlaceholder').val('');
  29.    });
  30.   }
  31. });
  32. </script>
  33. <style>
  34. .hasPlaceholder {
  35.   color: #777;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40.    <input type="text" name="search" placeholder="Search here..." /> 
  41. </body>
  42. </html>


Ejemplo: LINK

De este modo, disfrutar de la esperanza.
Every job is a self-portrait of the person who did it: Autograph your work with excellence.

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 6 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 100 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC