title: Display search field placeholder text
body: <p>I have an issue where I think some javascript is keeping my search field placeholder text from showing. I would like it so that when my page is loaded, the user can see at the top a search icon with the text SEARCH written beside it (the placeholder text) and this text will disappear once the user clicks the input area and enters their text. My issue is that when my page is loaded, only the search icon appears and no text - it is only after I click the input field once and then click out of it again that the SEARCH placeholder is there. 
  Here is my html: </p>
  
  <pre><code>&lt;form id="search" role="search" onsubmit="return checkForm()" action="${searchPage}" method="get" name="simpleSearch"&gt;
      &lt;fieldset&gt;
          &lt;legend aria-hidden="true" class="visually-hidden"&gt;${Resource.msg('simplesearch.searchCatalog', 'search', null)}&lt;/legend&gt;
          &lt;button class="mobile-search-btn" for="q" aria-hidden="false" aria-expanded="false" aria-controls="q" tabindex="0" aria-label="show search field button tap twice to open search input field"&gt;${Resource.msg('simplesearch.searchlabel', 'search', null)}&lt;/button&gt;
          &lt;input tabindex="0" type="text" id="q" name="q" value="" class="searchField"  placeholder="${Resource.msg('simplesearch.searchtext', 'search', null)}" style="font-style:normal;" unbxdattr="sq"/&gt;
          &lt;input tabindex="0" type="submit" name="go" value="${Resource.msg('simplesearch.searchtext', 'search', null)}" unbxdattr="sq_bt"/&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And here is the javascript, which I believe is causing the issue. </p>
  
  <pre><code> //Header Search Handler
      function headerSearchHandler(){
          var $searchInput = $(".header-search input[type=text]"),
              $searchSubmit = $(".header-search input[type=submit]"),
              $mobSearchBtn = $(".mobile-search-btn"),
              $myAccountText = $(".menu-utility-user .account-text"),
              $miniCart = $("#header #mini-cart"),
              $searchForm = $(".header-search form"),
              $headerPromo = $(".header-promo-area");
  
  
          $mobSearchBtn.on("click touchend", function(e) {
  
  
              $(this).hide();
              $searchInput.show();
              $searchSubmit.show();
              $miniCart.addClass("search-open");
              $searchForm.addClass("search-open");
              setTimeout(function() {
                  $searchInput.addClass("active").focus();
              }, 500);
              e.stopPropagation();
          });
  
          $searchInput.on("click touchend", function(e) {
              e.stopPropagation();
          }).blur(function(e) {
              var $this = $(this);
              if(($this.val() != '') &amp;&amp; !$this.hasClass("placeholder")){return;}
              if($this.hasClass("active")){
                  $this.removeClass("active");
                  $this.hide();
                  $searchSubmit.hide();
                  //$myAccountText.show();
                  $mobSearchBtn.show();
                  $miniCart.removeClass("search-open");
                  $searchForm.removeClass("search-open");
              }
          });
      }//End Header Search Handler
  </code></pre>
  
  <p>I've been going over this and I can't figure out what is happening. I am new to this, but can anyone see why my placeholder text isn't automatically showing when the page is loaded?</p>
  
  <p>UPDATE! After going through this some more, it appears that THIS is the code affecting the placeholder, which I still can't quite figure out: </p>
  
  <pre><code>(function (app, $) {
  
      function initializeEvents() {
          $('[placeholder]').each(function (){
              var jqThis = $(this),
              placeholder = jqThis.attr("placeholder");
  
              jqThis.focus(function () {
                  if (jqThis.val() == placeholder) {
                      jqThis.removeClass('placeholder').val('');
                      jqThis.attr('placeholder', '');
  
                  }
              }).blur(function () {
                  if (jqThis.val() == '' || jqThis.val() == jqThis.attr('placeholder')) {
                      jqThis.addClass('placeholder').val(placeholder);
                      jqThis.attr('placeholder', placeholder);
                  }
              });
          });
      }
  
      app.searchplaceholder = {
          init : function () {
  
              // This function seems to disable submit buttons in checkout via ie10
              // Is it necessary to cache the placeholder if it's node attribute is supported?
  
              if($.browser.msie &amp;&amp; $.browser.version === '10.0') return;
  
              initializeEvents();
          }
      };
  }(window.app = window.app || {}, jQuery));
  </code></pre>