Remove placeholder on foucs, and show it on blur

Remove the placeholder on foucs and show it on blur event.

by Varun Krishna P

HTML

<!-- Simple form with two input fields and one textarea -->
<form action="">
    <input type="text" name="fname" placeholder="First name" />
    <br/>
    <input type="text" name="lname" placeholder="Last name" />
    <br/>
    <textarea rows="5" cols="30" placeholder="Contact us!"></textarea>
    <br/>
    <br/>
    <input type="submit" value="Submit" />
</form>

JavaScript

$(function () {
    $('input,textarea').focus(function () {
        $(this).data('placeholder', $(this).attr('placeholder'))
               .attr('placeholder', '');
    }).blur(function () {
        $(this).attr('placeholder', $(this).data('placeholder'));
    });
});

//http://stackoverflow.com/questions/19676084/how-to-remove-placeholder-on-focus