title: Text input placeholders and cross browser support
body: <p>So I'm aware that the HTML5 <code>placeholder</code> attribute isn't supported in IE before IE10, but I really need the functionality.</p>
  
  <p>I thought I could do the following, but it doesn't seem to work (looks like the <code>.focus</code> and <code>.blur</code> methods aren't being fired...</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $(function() {
  
          function isPlaceholderSupported() {
              var input = document.createElement('input');
              return ('placeholder' in input);
          }
  
          var placeholderSupport = isPlaceholderSupported();
  
          if (placeholderSupport == false) {
              $('#store_name').val('Store Name');
          }
  
          $('#store_name').focus(function() {
              if (placeholderSupport == false) {
                  if ($(this).val() == 'Store Name') {
                      $(this).val('');
                  }
              }
          });
  
          $('#store_name').blur(function() {
              if (placeholderSupport == false) {
                  if ($(this).val() == '') {
                      $(this).val('Store Name');
                  }
              }
          });
      });
  &lt;/script&gt;
  
  &lt;input type="text" name="store_name" id="store_name" placeholder="Store Name" /&gt;
  </code></pre>
  
  <p>I can't see any flaw in the logic here, but this just isn't working. There's no errors being reported in Chrome's dev tools and I haven't tried it in IE9 yet.</p>
  
  <p>Any help will be greatly appreciated!</p>