Cambiar estilos de un input con JQuery cuando es seleccionado

Enviado por keopx el Sáb, 26/09/2009 - 16:37

Es un script muy sencillo pero que hará mas agradable la visualización cuando seleccionemos un campo.

$(document).ready(function () {
  $('input[type="text"]').addClass("normal");
  $('input[type="text"]').focus(function () {
    $(this).removeClass("normal").addClass("selecionado");
    if (this.value == this.defaultValue) {
      this.value = '';
    }
    if (this.value != this.defaultValue) {
      this.select();
    }
  });
  $('input[type="text"]').blur(function () {
    $(this).removeClass("selecionado").addClass("normal");
    if ($.trim(this.value == '')) {
      this.value = (this.defaultValue ? this.defaultValue : '');
    }
  });
}); 

type="text" se puede cambiar por type="password" o que sea para poder realizar las mismas modificaciones.

Fuente: http://buildinternet.com/2009/01/changing-form-input-styles-on-focus-with-jquery/

Categoria

Añadir nuevo comentario

El contenido de este campo se mantiene privado y no se mostrará públicamente.

HTML Restringido

  • Etiquetas HTML permitidas: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Saltos automáticos de líneas y de párrafos.
  • Las direcciones de correos electrónicos y páginas web se convierten en enlaces automáticamente.