You can find several ways of putting some sample text in a HTML input text which fades away when you click it. Some of them use a few lines of javascript, others take advantage of Javascript frameworks, and there are even ways to achieve it using just CSS (but it doesn’t work in IE anyway). But I haven’t found any guidance on doing it to password inputs. So I did it my way.
The problem
The image bellow shows the desired behavior. When you open the webpage you can see an input with a grayed out message on it, telling the user that it is a password field. When you click the input, you can type your password (without being displayed on the page). If you click outside the input, and it is empty, the “Password” message appears again.
The solution I present is based in Javascript, and you can achieve it without using any server-side technology. But since I had to do this using ASP.NET, I’ll show you an example using this technology.
ASP.NET markup
First of all let’s take a look at the markup. I’ve create 2 textboxes, one using the Password text mode, where you can type text without displaying it on the browser, and another one which is a simple textbox with our “Password” message. I’ve grayed out this message and left the input as readonly, since we don’t need its value.
Disclaimer
As you may know I am a fan of C#, and I don’t like VB.NET that much… But since while writing this demo I accidentally created an VB.NET project, instead of creating another one I took advantage of the opportunity to test my VB.NET skills. 
Now I love C# even more…
Javascript Injection
Now lets the the Javascript part of the solution. I use ASP.NET to inject the Javascript into the page in the server-side. I use the Attributes property of the textboxes to set styles and client-site event handlers. In order to hide the real password input when the page is rendered, I set the style attribute of the input element with the value “display:none”. When the fake password input gets focus, the browser hides it, shows the real password input and changes the focus to it. The user doesn’t even notice the input switch, at least if you make sure that the two inputs have the same style. When the password input loses focus (onblur event), if it is empty, the fake input is shown again .
About ClientID
If you are not that familiar with ASP.NET, or at least with client-side scripting used with ASP.NET, you may be wondering that is ClientID. Well, in this example it has the server-side name of the textbox, but when you use User Controls or Master Pages, not always the server-side name of a control is the same that the name/id in the client-side. So the ClientID property gives you the name/id that will be valid while trying to access the control on the client.
What if there is no Javascript support…
Ok, it works fine. And it is pretty clean. But what if by some reason the Javascript is disabled in the client browser? Well… The user won’t have access to the real password input, and will get stuck with the fake input which has the “Password” text and is read only. Even if he could write on it, in the server side the password wasn’t expected from that input anyway. So we need a solution that works even when Javascript is disabled. The user will not have the fancy sample text inside the input, but he will be able to type and send the password to the server. How?
First of all the default visibility status of the inputs will have to change. When the page is rendered the real password input must be visible and the fake one invisible. This way if Javascript is disabled, the user will get a standard password input. After the page is loaded, if Javascript is enabled, we switch the inputs. This switch occurs before the user sees the page, so the final result is the same (while using a Javascript-enabled browser).
The code that the “…” hides is the code of the first VB.NET block.
RegisterStartupScript
This is the method used in order to register script that is supposed to be used in the client side. Page.ClientScript has other nice methods, that allow your to attach onSubmit client-side event handlers and do other client-side Javascript related tasks. Two nice links about RegisterStartupScript are this an this.
You can download the complete source-code of this post.
