Hacer que el mensaje en el campo de texto desaparezca / reaparezca cuando el usuario escriba / borre

¿Alguien sabe cómo puedo hacer un efecto como este en mi barra de búsqueda: https://www.dropbox.com/help

Me refiero al efecto onFocus y onBlur con el texto desapareciendo y apareciendo dinámicamente.

Gracias amigos!

Usan CSS Animations en la propiedad de color:

Extracto de su main.css :

 .sick-input.focused label{ color:#ccc;transition:color .2s linear 0; -webkit-transition:color .2s linear 0; -moz-transition:color .2s linear 0 } 

Puede imitar el efecto usando el pseudo selector :focus en el campo de entrada con las definiciones mencionadas anteriormente.


Si por alguna razón no fuera lo suficientemente claro 🙂

http://jsfiddle.net/d9CMR/


Una solución más robusta:

http://jsfiddle.net/d9CMR/3/


Actualización (con el cambio de color adecuado):

http://jsfiddle.net/d9CMR/6/


Fuente:

HTML

  

CSS

 input { color:#333; } input:focus { color:#ccc;transition:color .2s linear 0; -webkit-transition:color .2s linear 0; -moz-transition:color .2s linear 0 } input.typing { color:#333; }​ 

Guión

 $(function(){ var input = $('input[name="input"]'), defaulttext = input.attr('data-default'); input.val(input.attr('data-default')); input.on('focus', function(){ if(input.val() != defaulttext) input.addClass('typing'); else input.removeClass('typing'); }).on('keydown', function(){ if(defaulttext == input.val()) input.val(''); input.addClass('typing'); }).on('blur', function(){ if(input.val() == '') input.val(defaulttext); that.removeClass('typing'); }); }); 

Pruébelo: utilizó HTML y CSS del sitio de Dropbox ….

HTML:

 

CSS:

 .sick-input label { font-size: 16px; position: absolute; left: 8px; top: 6px; cursor: text; pointer-events: none; color: #777; } .sick-input.populated label { display: none; } input { border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -moz-box-shadow: 0 0 0 #000, inset 0 3px 3px #eee; -webkit-box-shadow: 0 0 0 #000, inset 0 3px 3px #eee; box-shadow: 0 0 0 #000, inset 0 3px 3px #eee; font-size: 16px; border: 1px solid #BFBFBF; padding: 5px; width: 500px; } .sick-input.focused label { color: #ccc; transition: color .2s linear 0; -webkit-transition: color .2s linear 0; -moz-transition: color .2s linear 0; } 

JavaScript:

 $('#search-input').keyup(function() { if ($(this).val() === '') { $('.sick-input').removeClass('populated'); } else { $('.sick-input').addClass('populated'); } }) $('#search-input').focus(function() { $('.sick-input').addClass('focused'); }); $('#search-input').blur(function() { $('.sick-input').removeClass('focused'); }); 

Ejemplo de trabajo aquí

Aquí hay un ejemplo:

HTML

 

CSS

 body { padding: 20px; } div { position: relative; } div label { position: absolute; left: 8px; top: 4px; color: #666; z-index: 2; font: 11px arial; } div input { position: absolute; padding: 3px 6px; border: 1px solid #ddd; border-radius: 2px; z-index: 1; font: 11px arial; } .populated label { display: none; } 

Javascript

 $('input').on('keydown keypress keyup', function(e) { if($('input').val() == '') { $('div').removeClass('populated'); } else { $('div').addClass('populated'); } }); 

Y si no quieres usar el atributo de placeholder , utiliza esto :

HTML

 

Javascript

 $('input').on('keydown keypress keyup', function(e) { if($('input').val() == '') { $('div').removeClass('populated'); } else { $('div').addClass('populated'); } }).on('focus', function(e) { var $this = $(this); if($this.val() == $this.data('placeholder')) { $this.val(''); } }).on('blur', function(e) { var $this = $(this); if($this.val() == '') { $this.val($this.data('placeholder')); } }).data('placeholder', $('input').val()); 

Y si no desea usar el atributo de value del campo de input , esto podría ayudar:

HTML

 

CSS

 body { padding: 20px; } div { position: relative; } div label { position: absolute; left: 8px; top: 4px; color: #666; z-index: 2; font: 11px arial; } div input { position: absolute; padding: 3px 6px; border: 1px solid #ddd; border-radius: 2px; z-index: 1; font: 11px arial; } .populated label { display: none; } .focused label { color: #aaa; } 

Javascript

 $('input').on('keydown keypress keyup', function(e) { if($('input').val() == '') { $('div').removeClass('populated'); } else { $('div').addClass('populated'); } }).on('focus', function(e) { $('div').addClass('focused'); }).on('blur', function(e) { $('div').removeClass('focused'); }); 

También podría usar el atributo html5 placeholder = “”, que tiene un efecto similar .

Y utilice un respaldo de jquery para un navegador más antiguo: https://github.com/mathiasbynens/jquery-placeholder

Puedes intentar esto

Código Javascript

 function txtblur() { document.getElementById('txtval').value=""; } function textblur() { document.getElementById('txtval').value="Enter word to search"; } 

Código de cuadro de texto HTML

  

También puede establecer un sprite de imagen de fondo que contenga el texto deseado en el campo de entrada si se conoce la altura o el ancho, y simplemente ajuste la posición de fondo en los eventos onfocus y onblur.