Esta pequeña función de jQuery me es muy útil cuando tengo un campo de texto (, </strong>, etc) y éste tiene un valor por defecto (por ejemplo, el <em>Buscar</em> que se ve en el <em>header</em> de este humilde sitio). Cuando hago foco en él para escribir, quiero que ese <strong>value</strong> desaparezca y el usuario pueda ingresar lo que quiera; caso contrario, si el usuario lo deja vacío o si es el mismo que el original (en este caso, <em>Buscar</em>) vuelve a restablecerse al definido por defecto.</p> <pre><code class="language-javascript">$('input').each(function(){ <span class="commentjs">// tomamos el valor actual del input</span> var currentValue = $(this).val(); <span class="commentjs">// en el focus() comparamos si es el mismo por defecto, y si es asi lo vaciamos</span> $(this).focus(function(){ if( $(this).val() == currentValue ) { $(this).val(''); }; }); <span class="commentjs">// en el blur, si el usuario dejo el value vacio, lo volvemos a restablecer</span> $(this).blur(function(){ if( $(this).val() == '' ) { $(this).val(currentValue); }; }); });</code></pre> <p>[Ver ejemplo][1]{.verejemplo}</p> <p>[1]: <a href='http://www.csslab.cl/ejemplos/jquery_vacia_value/'>http://www.csslab.cl/ejemplos/jquery_vacia_value/index.html</a> “Enlace en CSSLab a “Ver ejemplo Tip Precoz 6: Limpiar valores de input””</p> </div></div> <div class="pagination"> <div class="pagination__title"> <span class="pagination__title-h">Leer otros artículos</span> <hr /> </div> <div class="pagination__buttons"> <span class="button previous"> <a href="/2010/06/15/podcast-04/"> <span class="button__icon">←</span> <span class="button__text">Podcast 04</span> </a> </span> <span class="button next"> <a href="/2010/06/04/lo-vi-y-me-gusto-35/"> <span class="button__text">Lo ví y me gustó 35</span> <span class="button__icon">→</span> </a> </span> </div> </div> </div> </div> <footer class="footer"> <div class="footer__inner"> <div class="copyright copyright--user"> <span>© CSSLab 2005 ~ 2022. Todos los derechos reservados.<br> Escrito y mantenido por Jorge Epuñan desde 🇨🇱.</span> </div> </div> </footer> <script src="/assets/main.js"></script> <script src="/assets/prism.js"></script> <script src="//static.codepen.io/assets/embed/ei.js" async></script> </div> </body> </html>