auto-hide placeholder text

How do I auto-hide placeholder text upon focus using css or jquery?

by Suresh Pattu

HTML

<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 amount" />
       </li>
    </ul>                  
</form>

CSS

li{padding:15px;}
input{padding:8px;}

JavaScript

$("input").each(
            function(){
                $(this).data('holder',$(this).attr('placeholder'));
                $(this).focusin(function(){
                    $(this).attr('placeholder','');
                });
                $(this).focusout(function(){
                    $(this).attr('placeholder',$(this).data('holder'));
                });
                
        });