Click here to Skip to main content
Email Password   helpLost your password?

Update History

Wednesday August 30, 2006: Patched the Single Quote bug. The library used to brake down when a single quote was supplied in WatermarkText

Wednesday August 23, 2006: Patched the library to work with FireFox. 

Introduction

You may have seen some web sites displaying watermarks in text boxes. As soon as you click on a text box, the watermark disappears and you can start entering text. In this article, I will explain a small JavaScript trick that you can use to do the same in your web application. I have included a library that you can use to achieve the same functionality without having to worry about JavaScript. 

Sample screenshot

Background

The idea is to capitalize on OnFocus and OnBlur events of the HTML input tag. The library sets flips between two styles for the input tag and, also, it checks if the default text has been changed or not.

Using the code

To use the code, you need to provide at least two styles for the text box. First that represents the watermarked textbox and another that represents a normal textbox. The sample project includes such a stylesheet.

To apply watermark to a textbox with id=textbox1, write the following in your page_load event handler. 

TextBoxWatermark.WaterMarkHelper.ApplyWaterMarkToTextBox(
                        textBox1, "Watermarktext", "WaterMarkedTextBoxStyle", "NormalTextBoxStyle")

Enhancements

You can enhance the library to intercept the submit event and remove the default text before required field validators fire.

You must Sign In to use this message board.
 
 
Per page   
 FirstPrevNext
GeneralPassword boxes
Johnny J.
0:53 10 Mar '09  
Has anybody tried to apply a watermark on a password textbox and got it to work?

If so, could you please tell me how?

Cheers,
Johnny J.
QuestionMissing Library in Source Zip
Dapo Onawole
1:07 19 Nov '08  
Hi,
I can't seem to find the library from the downloadable demo-project source. Where is that located?
AnswerRe: Missing Library in Source Zip
Deobrat Singh
1:17 19 Nov '08  
Inside the zip file, there are two directories - TextBoxWatermark, and TextBoxWatermark_Demo.

The actual library is in TextBoxWatermark directory

Deobrat Singh
GeneralRe: Missing Library in Source Zip
Dapo Onawole
2:22 19 Nov '08  
Yeah right! Thanks. Missed that folder while in a hurry to get this task done. Laugh
GeneralRe: Missing Library in Source Zip
Deobrat Singh
2:24 19 Nov '08  
I am amazed that this silly hack I wrote long back is still relevant Smile

Deobrat Singh
GeneralC# Version
BronwenZande
16:42 2 Jan '07  
Great little helper function Smile
I converted it to C# here:
http://www.soulsolutions.com.au/Blog/tabid/73/EntryID/88/Default.aspx
GeneralASP.NET 2.0 ISSUE
RogerMCT
8:34 23 Oct '06  
GREAT SCRIPT!!

I have a issue with ASP.NET 2.0 that I am not sure how to fix. When I associate the script I reference the textbox name but because I'm using MasterPages it renders the output like this...

name="ctl00_body_tbxName"

Well, this effectivly breaks the script. Any Ideas?
AnswerRe: ASP.NET 2.0 ISSUE
Deobrat Singh
19:01 23 Oct '06  
I have checked it with master pages. it is working perfectly fine..
If at all it is not working on your end, can you please send me the details of the problem?
In my test case, I have a master page which is used by a content page. I have the textbox controls on this content page. And in Page_Load event handler, I have associated the script with the textbox control. It is working fine in this case.
My code uses control.ClientId which is the name that ASP.NET generates before rendering the control. I dont see any problem with it. Please get back if you still have issues with it.

Deobrat Singh
Mumbai, India
Education is what survives when what has been learned has been forgotten.
- B. F. Skinner

GeneralHow to customize the messages while setup the application using vb.net?
xxxxxxxxxchandra
1:43 30 Aug '06  
1.How to create a setup excluding the .Net framework? Always, the .net framework is adding along the setup, when I create a Setup in my system.

2. How to customize the built in messages?
For example: The .net frame work is not available in the system, It is showing the message "This setup requires the .Net framework version 1.1.4322. Please install the .Net Framework and run the setup again. The .Net Framework can be obtained from the web. Would you like to do this now?".

How to customize the above message "This setup requires the .Net framework version 1.1.4322. Please install the .Net Framework and run the setup again. The .Net Framework can be obtained C:\Software\DotNet".



Chandrasekhar V
QuestionWatermark library and single quotes
pbishop
10:10 29 Aug '06  
This library seemed to work really well until I included a word with a single quote in my watermark text. It effectively broke the javascript. Does anyone know of a work around or mod to fix this?
AnswerRe: Watermark library and single quotes [modified]
Deobrat Singh
10:29 29 Aug '06  
Yes,
I forgot to add that thing. What you can do is, open the code for TextBoxWaterMarkHelper class and wherever you find textBox.Text, replace it with textBox.Text.Replace("'", "\'")
It should work fine. Do let me know if there are any issues with it.


-- modified at 8:01 Saturday 23rd September, 2006

Deobrat Singh

Mumbai, India
Education is what survives when what has been learned has been forgotten.
- B. F. Skinner


GeneralRe: Watermark library and single quotes
pbishop
10:49 29 Aug '06  
Thanks for your quick reply. I think you're on the right path, but it still doesn't work. textBox.Text is only present once in this method:

textBox.Text = waterMarkText

You can't replace textBox.Text with textBox.Text.Replace in this instance, so I set it on the preceding line (I added textBox.Text = textBox.Text.Replace("'","\'")) but it didn't work. I think the waterMarkText variable is where the single quote needs to be escaped, but it didn't work for me either.
GeneralRe: Watermark library and single quotes [modified]
Deobrat Singh
11:06 29 Aug '06  
Hmm...

Please wait untill tomorrow. I'll apply a fix. I dont have a code editor right now


-- modified at 8:02 Saturday 23rd September, 2006

Deobrat Singh

Mumbai, India
Education is what survives when what has been learned has been forgotten.
- B. F. Skinner


GeneralRe: Watermark library and single quotes [modified]
Deobrat Singh
20:47 29 Aug '06  
I have updated the library. Its working on IE. Have not tested it on FireFox but I don't think it should be a problem.
Just try the component now and let me know if it works well.
Don't forget to rate the article Wink


-- modified at 8:02 Saturday 23rd September, 2006

Deobrat Singh

Mumbai, India
Education is what survives when what has been learned has been forgotten.
- B. F. Skinner


GeneralRe: Watermark library and single quotes
pbishop
4:30 30 Aug '06  
Works great! Thanks!
GeneralAtlas can do this too with control extenders
Robert Ensor
21:12 22 Aug '06  
... if you feel like installing it. http://atlas.asp.net/[^]
GeneralRe: Atlas can do this too with control extenders [modified]
Deobrat Singh
21:46 22 Aug '06  
I have been working on Atlas since quite some time. This component can work with asp.net 1.1 also.
However, the solution file will not open in VS 2003. You can create a new solution in vs 2003 and then add the class to that solution.


-- modified at 4:41 Thursday 31st August, 2006


-- modified at 8:03 Saturday 23rd September, 2006

Deobrat Singh

Mumbai, India
Education is what survives when what has been learned has been forgotten.
- B. F. Skinner


GeneralValidators?
rjpaulsen
10:20 22 Aug '06  
I was working on a similar control but have an issue with validators.

I haven't tried this one, but I'm guessing it has the same problem as mine does, validators try validating the watermark text.

Example: The text "dd/mm/yyyy" would not pass a Date Comparison validator.

I was thinking that placing a dynamically created control (via Java Script) would work, but that's a lot more JS then I'm willing crank out in the middle of a project.

The other solution I was thinking about was registering a java script method that would, after clicking submit, delete the text for any input with the Watermark text in it. That sounds like a lot of work too. Smile


GeneralRe: Validators?
Deobrat Singh
19:29 22 Aug '06  
Yeah... You are right. As I have pointed out in the Enhancement section, it is definitely required to make this component work with validation controls. I am already working on it. And you would be happy (i guess so) to know that I am working on the second suggestion that you gave (a script removing the default data).
Thanks for the comment. And expect a revision of this article (with an improved version of the component) in a week or two (I dont get much time to do it. I'll try my best).

Deobrat Singh
Software Engineer,
HCL Technologies Ltd.
Mumbai, India
Education is what survives when what has been learned has been forgotten.
- B. F. Skinner

GeneralRe: Validators?
itsmaryann
1:04 8 Sep '08  
Hi Deobrat,
Thank you for your solution. I cannot use it now since it does not work with validators. Did you find a solution for it?
GeneralFireFox Problem
asifrazach
5:19 22 Aug '06  
HI
The Component is not workign properly in Fire Fox Can you check it.
By The Way it is realy a nice component

GeneralRe: FireFox Problem [modified]
Deobrat Singh
19:31 22 Aug '06  
Hi, I have not yet tested it with FireFox (i don't have it on my box right now). I'll definitely look into it and will post a patch ASAP. Thanks for the comment Smile


-- modified at 8:03 Saturday 23rd September, 2006

Deobrat Singh

Mumbai, India
Education is what survives when what has been learned has been forgotten.
- B. F. Skinner


GeneralRe: FireFox Problem [modified]
Deobrat Singh
23:34 22 Aug '06  
I have made some fixes to the control. Can you check it again with FireFox... please


-- modified at 8:04 Saturday 23rd September, 2006

Deobrat Singh

Mumbai, India
Education is what survives when what has been learned has been forgotten.
- B. F. Skinner


GeneralRe: FireFox Problem
asifrazach
3:08 23 Aug '06  
Thanks

It is Now Working fine with the FireFox.
GeneralCSS
ANameNotRegistered
1:27 16 Aug '06  
If you're targetting standards-compliant browsers and don't care about IE, you can accomplish the same functionality with straight CSS, using the :active pseudo-selector:

input.foo:active { ... }

<input type="textbox" class="foo" value="bar">


Last Updated 30 Aug 2006 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2010