TextBox - OnBlur (clear textBox onClick; show text onBlur)

[Ana D.]

Hi,

In my page I have the following code:

<asp:TextBox ID="SearchCriteriaTextBox" runat="server" Text="Enter Search Criteria" Width="150px" ForeColor="GrayText" OnClick="this.value = ''; this.style.color = 'black'" OnBlur="javascript:changeText('<%=SearchCriteriaTextBox.ClientID %>')" />

And for the javascript:

function changeText(txtB) {
            var textBox = document.getElementById(txtB);
            var txt = textBox.value;
            if (txt = "") {
                textBox.value = "Enter Search Criteria";
                textBox.style.color = "grey";
            }
        }

What I'm trying to do is, when the user clicks on the TextBox, the text is cleared (this part is working) and when the user clicks outisde the textBox the text "Enter Search Criteria" is shown again, but only if the the textBox is empty. The problem is that on the function changeText the variable textBox is null, but I don't understand why.

Does anyone know what is wrong?

Thanks in advance,

Ana

[Ramesh S]

If see ViewSource of the HTML for your page, <%=SearchCriteriaTextBox.ClientID %> is not rendered properly.

You can change your code as below

<asp:TextBox ID="SearchCriteriaTextBox" runat="server" Text="Enter Search Criteria" Width="150px" ForeColor="GrayText"  OnClick="this.value = ''; this.style.color = 'black'" OnBlur="javascript:changeText(this.id)" />

[Ana D.]

Hi Ramesh,

Thanks for you reply! It solved the problem and now it's working great! Thanks a lot!

Ana

[Ana D.]

Hi Ramesh,

The code you suggested worked for my case initially. But now I need to reference another control in the javascriptMethod. So, the parameter I have to pass to the javascript method are: myTextBox.ClientID and myButton.ClientID.

myTextBox.ClientID I can pass using this.id, but how do I do with myButton.ClientID?

Thanks,

Ana

[yamanshr]

Simplifing the code:

<asp:TextBox ID="SearchCriteriaTextBox" runat="server" Text="Enter Search Criteria" Width="150px" ForeColor="GrayText"  OnClick="this.value = ''; this.style.color = 'black'" OnBlur="this.value='Enter Search Criteria';this.style.color='grey'" />