C# - How to change value of textbox on focus

Question

I'm writing an application in C#. I would like to replace the value for the TEXT property after the user clicks (focuses) on a textbox. I would like to set the TEXT value to be blank instead of the words "ENTER NAME HERE" when they click to edit the textbox.

Front-end:

<asp:TextBox Text="ENTER NAME HERE" OnClick="MyTextboxID_OnClick" ID="MyTextboxID" runat="server"></asp:TextBox>

Code-behind:

protected void MyTextboxID_OnClick(object sender, EventArgs e) 
{
    MyTextboxID.Text = "";
}

I tried to find the answer to this question but the answers didn't quite match what I wanted to do.

I was hoping C# had something similar to Javascript's "OnClick" or "OnFocus" events. I added the OnClick event to the textbox for illustration purposes. This OnClick event doesn't work.

Thank you in advance for your help!

Answer 1

Remember that ASP.NET is primarly server-side . Actions that run in C# require a post-back to the server. The impact of this on a page can be mitigated somewhat by using AJAX, but this is why you don't see an "OnClick" event off the ASP control.

However, you can still use the Javascript "OnClick" event. Since Javascript runs on the client, and the interaction in this instance is entirely handled on the client, you should just use that.

Answer 2

If you are not comfortable using Javascript, you might want to look at TextBoxWatermark server side control.

It is available NuGet .

<asp:TextBox OnClick="MyTextboxID_OnClick" 
    ID="MyTextboxID" runat="server">
</asp:TextBox>

<ajaxToolkit:TextBoxWatermarkExtender ID="TBWE2" runat="server"
    TargetControlID="MyTextboxID"
    WatermarkText="ENTER NAME HERE"
    WatermarkCssClass="watermarked" />

Answer 3

Why don't you use the place holder attribute and not have to worry about replacing the text at all. This would show when the text box is empty but disappear on focus

Answer 4

You should simply use the following Placeholder="Enter text here."

Option One:

<asp:Textbox id="txtName" runat="server" placeholder="Enter name here." />

Option Two:

$("#<%= txtName.ClientId %>").setAttribute('placeholder', 'Enter name here.');
$("#<%= txtName.ClientId %>").attr('placeholder', 'Enter name here.');

For the Javascript implementation, you would simply place that in your View and wrap it in: <script type="text/javascript"></script> . Those are the ideal approaches to display text which clears on focus.

You could also utilize the Tooltip . Hopefully these examples assist you. Important note, I have no issues with compatibility in IE 8 with the Placeholder. Also these approaches won't force a Postback which can occur due to Server-Side. Which would force you to either do a Postback or implement a Update Panel / Ajax to hide the Postback .

• Plugin: https://github.com/mathiasbynens/jquery-placeholder