asked on

How to clear pre-filled textBox on selection

I have a simple asp:textbox in a form on a webpage. I would like to prefill the box with the type of information expected (I.e. Name, Email, Phone, etc.) instead of having to label the box. I have the boxes pre-filled using Text="Name", but I would like to have the pre-filled content cleared when the user clicks in the box - or at least highlighted when clicked to be overwritten by the user's input.

Using focus seems to work on JavaScript INPUT field, but I can't get it to work the same way on asp:textbox. Is there an easy/good way to do this?

Be nice and keep it simple (if possible) ... I can follow most code, but I do consider myself a beginner :)

Thanks.

leakim971

Check this :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.search{
        background:#ffffff url(http://t0.gstatic.com/images?q=tbn:Clh0xVbbj62m6M:http://www.acousticbulletin.com/FR/LOUPE.jpg) no-repeat left;
        text-align:center;
}
</style>
<script language="javascript">
        function swapType(o) {
                if(o.type=="text") {
                        if(o.value=="Enter Password") o.value = ""; 
                        o.setAttribute("type","password");
                }
                else
                        if(o.value.length==0) {
                                o.value='Enter Username'
                                o.setAttribute("type","text");
                                o.value = "Enter Password";
                        }
        }
</script>
</head>
<body>
<input class="search" type="text" name="search" value="Enter Username" onfocus="if(this.value=='Enter Username') this.value=''" onblur="if(this.value.length==0) this.value='Enter Username'" />
<br /><br>
<div id="here"><input class="search" type="text" name="passwd" value="Enter Password" onfocus="swapType(this);" onblur="swapType(this);" /></div>
</body>
</html>

Open in new window

Michel Plungjan

What is a javascript input field and what makes an asp textbox not a normal input field when rendered?

Try this

emailaddress.Attributes.Add("onFocus", "this.value=''"); <<<< not that the ='' are two single quotes

Michel Plungjan

Come on leakim, give someone else a chance to answer.
Anyway, my comment was codebehind

PowerEdgeTech

ASKER

I have been successful using onfocus on javascript input boxes, but I need this to work on an asp:textbox.

leakim971

@mplungjan you right Boss ;-)) See you soon!

PowerEdgeTech

ASKER

For example, I can use JavaScript here to clear the contents:

<input id="fname" type="text" value="First Name" onFocus="this.value=''">

What I need is the same kind of functionality for the following VB.NET form:

<asp:TextBox id="Name" runat="server" Text="Name" />

I noticed that adding the onFocus="this.value=''" to it will actually clear it, I guess my question is ... Since this doesn't seem to be supported by the asp:textbox control, is it ok to do it this way? Is there a better way I "should" be doing this? Again ... beginner :)

ASKER CERTIFIED SOLUTION

kris_per

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

PowerEdgeTech

ASKER

Perfect!

Michel Plungjan

If this works

TextBox1.Attributes["onclick"] = "clearTextBox(this.id)";

then this shoould work too

TextBox1.Attributes["onclick"] = "this.value=''";

no?

PowerEdgeTech

ASKER

Yes, I can see now that it does, and perhaps I should have split some of the points to you, but Kris remembered that I am a beginner and spelled the solution out so it made sense to me. His answer "clicked", so I chose it.