jQuery – Remove Default Value on Textboxes and Textareas on Focus

Using jQuery, you can easily check for mouse clicks on your input textboxes and textareas (in this example), and remove the text that you have specified as defaults. By doing this, you can inform users what each field is, without having to lay out your form with text near it, rather than in the input areas themselves. Quick examples with code are after the break that show how to hide text on click of a textbox or textarea.

Assuming you’re including jQuery in your site, this code will look for any onClick and OnLostFocus (focus and blur) events on all of your textareas and input textboxes.

$(document).ready(function () {
    $('input[type="text"], textarea').focus(function () {
        defaultText = $(this).val();
    $('input[type="text"], textarea').blur(function () {
        if ($(this).val() == "") {

Download the jquery.formFocusBlur file.

Posted in HTML, jQuery