How to highlight the text of a text box & Set focus on it (ASP.Net)

Problem:

Couple of days back, I had to put some text boxes on my web application. This was a registration form with User Name & Email address etc, to be provided by the use. Due to lack of space available on the page, I could not put labels/captions for these text boxes. But somehow user must know what to be input into which text box.

Solution:

To avoid labels, we can provide the captions right there inside the text boxes itself as some initial value, but user would not like to delete this text before entering the actual value. So we should have some mechanism to highlight this text when the page is shown to the user and when user sets its focus to any text box; this text should get removed & user should be able to input his/her value.

Also the first (or some other text box as per the requirement) textbox should get default focus so that when the page is displayed to the user & user starts typing; it should be typed to that text box.

And when user moves to next text box, the initial text there should get selected to allow user to type to overwrite that value.

Let’s consider two text boxes on an Asp.Net web application, TextBox1 & TextBox2 with initial text-value as “User Name of the User” & “Email Address of the User” respectively.

Then, use the below mentioned code in the code behind (.cs) to register the client site function to select (Highlight) the text & set the focus the accordingly.

this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), “onload”, “window.onload = function() { document.getElementById(‘” + TextBox1.ClientID + “‘).select(); document.getElementById(‘” + TextBox1.ClientID + “‘).focus();}”, true);

 

 

TextBox2.Attributes.Add(“onfocus”, “JavaScript:document.getElementById(‘” + TextBox2.ClientID + “‘).select();”);

Output:

1.    Default View of the page: Text of TextBox1 is selected & focus is on it by default.

 default-view

 

 

 

 

 2.    View when use moves to second textbox: Text of second textbox (textbox2) is selected.

on-focus_textbox2

 

 

 

 

 

Advertisements
This entry was posted in .Net 2.0. Bookmark the permalink.

4 Responses to How to highlight the text of a text box & Set focus on it (ASP.Net)

  1. ocertain says:

    Wouldn’t it be easier to just use standard .Net code behind techniques? Something like this:

    TextBox1..Attributes.Add(“onfocus”, “this.select()”);

    This way, there is no need for any javascripting at all. Just one line of code does the job. 😉

  2. ocertain says:

    I had a typo in my response above. The code should be:

    TextBox1.Attributes.Add(”onfocus”, “this.select()”);

    Sorry about that.

  3. Hey ocertain,

    Yeah…we can do this way too…but again that was just to show how to identify the server side controls from the javascript.

    anyway thanks,
    Munish Bansal

  4. Mark says:

    This is excellent, two hours searching around and trying to avoid JS. Thanks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s