Input without label (like a placeholder)

    June 22, 2012 | jQuery Snippets

    [javascript]
    /*!
    * Code by Marcio Toledo
    * http://marciotoledo.com
    */

    // This is like placeholder of HTML5
    // Inicio a variavel que representa o value dos campos que funcionam como label
    var input_value;
    // Ativando os campos
    $(‘.label’).focus(function () {
    input_value = $(this).val();
    $(this).val(”);
    $(this).addClass(‘active’);
    }).blur(function() {
    if (this.value == ”) {
    $(this).removeClass(‘active’);
    $(this).val(input_value);
    }
    });
    [/javascript]

    Tags:

    One Reply to Input without label (like a placeholder)

    1. Willy says:
      August 2, 2012 at 9:34 am

      input_value = $(this).val();
      $(this).val(”);
      $(this).addClass(‘active’);

      This is 3 calls to the same “this” element, who goes through the DOM to find it each time.
      This is a ressource consumer on large apps.

      Try this piece of code instead :
      var $this = $(this); // Only one call
      var input_value = $this.val(); // Element is cached
      $this.val(”).addClass(‘active’); // Don’t forget to chain

      Reply

    Leave a Reply