title: placeholder jquery - programmatic focus
body: <p>using the below jquery placeholder plugin that creates labels and overlays the field with the label. </p>
  
  <p>My issue is that I have field validation and a function that places focus on the field that returns a validation error.</p>
  
  <p>By setting the focus programatically, the label/placeholder persists. If I click into the field, it works as it should. </p>
  
  <p>Any obvious workarounds?</p>
  
  <pre><code>/*****************************************************************************
  jQuery Placeholder 1.1.1
  
  Copyright (c) 2010 Michael J. Ryan (http://tracker1.info/)
  
  Dual licensed under the MIT and GPL licenses:
      http://www.opensource.org/licenses/mit-license.php
      http://www.gnu.org/licenses/gpl.html
  
  ------------------------------------------------------------------------------
  
  Sets up a watermark for inputted fields... this will create a LABEL.watermark
  tag immediately following the input tag, the positioning will be set absolute,
  and it will be positioned to match the input tag.
  
  To activate on all tags with a 'data-watermark' attribute:
  
      $('input[placeholder],textarea[placeholder]').placeholder();
  
  
  To style the tags as appropriate (you'll want to make sure the font matches):
  
      label.placeholder {
          cursor: text;               &lt;--- display a cursor to match the text input
  
          padding: 4px 4px 4px 4px;   &lt;--- this should match the border+padding
                                              for the input field(s)
          color: #999999;             &lt;--- this will display as faded
      }
  
  You'll also want to have the color set for browsers with native support
      input:placeholder, textarea:placeholder {
          color: #999999;
      }
      input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
          color: #999999;
      }
  
  ------------------------------------------------------------------------------
  
  Thanks to...
      http://www.alistapart.com/articles/makingcompactformsmoreaccessible
      http://plugins.jquery.com/project/overlabel
  
      This works similar to the overlabel, but creates the actual label tag
      based on a data-watermark attribute on the input tag, instead of
      relying on the markup to provide it.
  
  *****************************************************************************/
  (function($){
  
      var ph = "PLACEHOLDER-INPUT";
      var phl = "PLACEHOLDER-LABEL";
      var boundEvents = false;
      var default_options = {
          labelClass: 'placeholder'
      };
  
      //check for native support for placeholder attribute, if so stub methods and return
      var input = document.createElement("input");
      if ('placeholder' in input) {
          $.fn.placeholder = $.fn.unplaceholder = function(){}; //empty function
          delete input; //cleanup IE memory
          return;
      };
      delete input;
  
      $.fn.placeholder = function(options) {
          bindEvents();
  
          var opts = $.extend(default_options, options)
  
          this.each(function(){
              var rnd=Math.random().toString(32).replace(/\./,'')
                  ,input=$(this)
                  ,label=$('&lt;label style="position:absolute;display:none;top:0;left:0;"&gt;&lt;/label&gt;');
  
              if (!input.attr('placeholder') || input.data(ph) === ph) return; //already watermarked
  
              //make sure the input tag has an ID assigned, if not, assign one.
              if (!input.attr('id')) input.attr('id') = 'input_' + rnd;
  
              label   .attr('id',input.attr('id') + "_placeholder")
                      .data(ph, '#' + input.attr('id'))   //reference to the input tag
                      .attr('for',input.attr('id'))
                      .addClass(opts.labelClass)
                      .addClass(opts.labelClass + '-for-' + this.tagName.toLowerCase()) //ex: watermark-for-textarea
                      .addClass(phl)
                      .text(input.attr('placeholder'));
  
              input
                  .data(phl, '#' + label.attr('id'))  //set a reference to the label
                  .data(ph,ph)        //set that the field is watermarked
                  .addClass(ph)       //add the watermark class
                  .after(label);      //add the label field to the page
  
              //setup overlay
              itemIn.call(this);
              itemOut.call(this);
          });
      };
  
      $.fn.unplaceholder = function(){
          this.each(function(){
              var input=$(this),
                  label=$(input.data(phl));
  
              if (input.data(ph) !== ph) return;
  
              label.remove();
              input.removeData(ph).removeData(phl).removeClass(ph);
          });
      };
  
  
      function bindEvents() {
          if (boundEvents) return;
  
          //prepare live bindings if not already done.
          $('.' + ph)
              .live('click',itemIn)
              .live('focusin',itemIn)
              .live('focusout',itemOut);
          bound = true;
  
          boundEvents = true;
      };
  
      function itemIn() {
          var input = $(this)
              ,label = $(input.data(phl));
  
          label.css('display', 'none');
      };
  
      function itemOut() {
          var that = this;
  
          //use timeout to let other validators/formatters directly bound to blur/focusout work first
          setTimeout(function(){
              var input = $(that);
              $(input.data(phl))
                  .css('top', input.position().top + 'px')
                  .css('left', input.position().left + 'px')
                  .css('display', !!input.val() ? 'none' : 'block');
          }, 200);
      };
  
  }(jQuery));
  </code></pre>
  
  <p>and here's the generated code on a field:</p>
  
  <pre><code>&lt;input name="Number" title="Enter Gift Card 1 Number" class="CO_PM_GiftCardNumField PLACEHOLDER-INPUT" id="frmGCD_1_Number" style="width: 144px;" onkeypress="return checkEnter(event,'frmGCD_1')" type="text" maxLength="19" placeholder="Enter gift card" /&gt;
  &lt;label class="placeholder placeholder-for-input PLACEHOLDER-LABEL" id="frmGCD_1_Number_placeholder" style="position: absolute; display: block; top: 18px; left: 14px;" for="frmGCD_1_Number" &gt;
  </code></pre>