How to Auto-Hide a Placeholder Text on Focus with CSS and jQuery

The <span class="attribute">placeholder</span> attribute describes the expected value of an input field. Before entering a value, a short hint is displayed in the field. A common challenge is making the placeholder text auto-hide when the input receives focus.

We’ll demonstrate how to auto-hide placeholder text on focus using HTML, CSS, and jQuery.

The simplest approach uses the <kbd class="highlighted">onfocus</kbd> and <kbd class="highlighted">onblur</kbd> events with the <input> element. This is quite easy if you follow the steps below.

Create HTML

Use an <input> element with the <span class="attribute">type</span> attribute.
Add a <span class="attribute">placeholder</span> attribute.
Add the <kbd class="highlighted">onfocus</kbd> and <kbd class="highlighted">onblur</kbd> events.

Example of auto-hiding the placeholder text with HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <input type="text" placeholder="enter your text" 
           onfocus="this.placeholder=''" 
           onblur="if(this.value==='') this.placeholder='enter your text'" />
  </body>
</html>

Try it Yourself »

Note: While inline event handlers work, modern development typically uses addEventListener in external JavaScript.

Alternatively, you can achieve the same effect purely with CSS using the :focus pseudo-class and ::placeholder pseudo-element.

Example of auto-hiding the placeholder text with CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input:focus::placeholder {
        color: transparent;
      }
    </style>
  </head>
  <body>
    <input type="text" placeholder="Enter your text" />
  </body>
</html>

Try it Yourself »

Note: The ::placeholder pseudo-element is supported in all modern browsers. For legacy browser support (IE, older Safari), a JavaScript fallback or polyfill may be required.

Result

<div class="demo"> <input placeholder="Enter your text" type="text">``</input> </div>

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

This approach stores the original placeholder value, clears it on focus, and restores it on blur.

<!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() {
        var $input = $(this);
        $input.data('holder', $input.attr('placeholder'));
        $input.on('focusin', function() {
          $input.attr('placeholder', '');
        });
        $input.on('focusout', function() {
          $input.attr('placeholder', $input.data('holder'));
        });
      });
    </script>
  </body>
</html>

Try it Yourself »