Labels animados
16/10/2018 by Casanova

Front.id

Vamos a abordar la forma de animar los labels de nuestros input de tipo texto, independientemente de la plataforma en que hayamos desarrollado el sitio y haciendo uso de un poco de jQuery mezclado con CSS.

La estructura usual de nuestro elemento es:

    <div class="wrapper">
        <label for="el1">Label</label>
        <input id="el1" type="text"/>
    </div>

Nuestro objetivo es abordar el comportamiento en cada estado de nuestro elemento: 

  • Cuando se hace foco y se pierde sin haber escrito algo. 
  • Cuando se hace foco y se pierde luego de haber escrito algo.

Justamente para poder personalizar esto, es que vamos a implementar unas lineas de jQuery:

$(document).ready(function () {
  $('input').each(function () {
    // Agregamos el class active al contenedor cuando se hace foco
    // sobre el input.
    $(this).on('focus', function () {
      $(this).parent('.wrapper').addClass('active');
    });
    // Retiramos el class active al contenedor cuando se pierde el
    // foco sobre el input y esta vacio.
    $(this).on('blur', function () {
      if ($(this).val().length === 0) {
        $(this).parent('.wrapper').removeClass('active');
      }
    });
    // Con esto evaluamos si el input tiene contenido
    // y mantenemos el class.
    if ($(this).val() !== '') {
      $(this).parent('.wrapper').addClass('active');
    }
  });
});

A partir de este momento ya contamos con el class active en el contenedor que nos va a permitir manipular input y label a nuestro antojo, es el momento de dejar volar nuestra imaginación.

Ejemplo

Acompaño algunos ejemplos de muestra:

Tags

Add new comment

The content of this field is kept private and will not be shown publicly.

Restricted HTML

  • Allowed HTML tags: <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>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.