Example of auto-hiding the placeholder text with CSS and jQuery:

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li {
        padding: 15px;
      }
      input {
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <form>
      <ul class="field-set field-set-stacked">
        <li class="field field-text">
          <input type="text" placeholder="Enter your name" />
        </li>
        <li class="field">
          <input type="text" placeholder="Enter your email address" />
        </li>
        <li class="field">
          <input type="text" placeholder="Enter your phone number" />
        </li>
      </ul>
    </form>
    <script>
      $("input")
        .each(
          function() {
            $(this)
              .data('holder', $(this)
                .attr('placeholder'));
            $(this)
              .focusin(function() {
                $(this)
                  .attr('placeholder', '');
              });
            $(this)
              .focusout(function() {
                $(this)
                  .attr('placeholder', $(this)
                    .data('holder'));
              });
          });
    </script>
  </body>
</html>