title: Unable to set value attribute for placeholder if value is empty using jquery
body: <p>Below is a sample HTML code with script tag using jquery:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          var email_def= "Enter email address";
          $('input[type="email"]').attr('value', email_def).focus(function() {
              if ($(this).val() == email_def) {
                  $(this).attr('value', '');
              }
          }).blur(function() {
              var val = $(this).val();
              if (val == '') {
                  $(this).attr('value', email_def);
                  alert(val);
                  alert(email_def);
              }
          });
      });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form&gt;
          Email: &lt;input type="email"&gt; &lt;input type="submit" id="submit"&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Steps to reproduce:</p>
  
  <ol>
  <li>Click in the input box. Placeholder value is cleared. Click outside, placeholder value is now reset back.</li>
  <li>Click in the input box. Type some text. Delete the text. Click outside. The placeholder value is not reset back.The alert are triggered. Even the email_def is being shown in alert. Now, the attribute value is not being reset to value of email_def.
  My question is why is the line <code>$(this).attr('value', email_def);</code> not being invoked inside the blur function.</li>
  </ol>
  
  <p>Edit: Thanks for the answers. Both, the placeholder of html5 and also replacing with the <code>$(this).val();</code> line seems to be working correctly</p>