How to reset webcontrol.textbox.text once it loses focus?

Question

I have a asp page and i have filter textboxes at the top. These 3 textboxes render with text in them(saying what to enter). I already have code added to select all text when the textbox gains focus but now i need to in a sense do the exact opposite when the control loses focus. The goal here is to make the textbox filters be filled with the default text at all times, except for when the user has entered a valid filter value.

Basically

if the control.text = string.empty and control.lostfocus then set text back to "default" end if

So far i have this code at page load...

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        txtAcctFilter.Attributes.Add("onFocus", "JavaScript:this.select();")
        txtMonthFilter.Attributes.Add("onFocus", "JavaScript:this.select();")
        txtYearFilter.Attributes.Add("onFocus", "JavaScript:this.select();")
        'txtAcctFilter.Attributes.Add("onBlur", )
        'txtMonthFilter.Attributes.Add("onBlur", txtMonthFilter.Text = "Enter Month")
        'txtYearFilter.Attributes.Add("onBlur", txtYearFilter.Text = "Enter Year")
        Populate()
    End If
End Sub

The 3 lines commented out are my attempts but i believe their is an issue between the properties being reverted on the control. I'm a noobie at javascript so not sure exactly whats going on there. Any ideas of how i can get this simple logic to work?

Answer 1

It would be something along the lines of this:

txtMonthFilter.Attributes.Add("onBlur", "javascript: if (this.value == """") {this.value = ""Enter Month""}")

Answer 2

you can use jquery:

$('input[id$="txtMonthFilter"]').blur( function () {
   if ($(this).val() == '') $(this).val('Enter Month');
});