Email Password Remember me?  Lost your password?

• Download source files (with demo project) - 16 Kb

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. 

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 102550

FirstPrevNext

Password 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. Sign In·View Thread·PermaLink Missing 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? Sign In·View Thread·PermaLink Re: 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 Sign In·View Thread·PermaLink Re: 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. Sign In·View Thread·PermaLink Re: 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 Deobrat Singh Sign In·View Thread·PermaLink C# Version BronwenZande 16:42 2 Jan '07   Great little helper function I converted it to C# here: http://www.soulsolutions.com.au/Blog/tabid/73/EntryID/88/Default.aspx Sign In·View Thread·PermaLink 2.00/5 ASP.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? Sign In·View Thread·PermaLink Re: 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 Web: Yahoo 360° , Windows Live Spaces Education is what survives when what has been learned has been forgotten. - B. F. Skinner Sign In·View Thread·PermaLink How 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 Sign In·View Thread·PermaLink 1.00/5 Watermark 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? Sign In·View Thread·PermaLink Re: 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 Web: Yahoo 360° , MSN Spaces Education is what survives when what has been learned has been forgotten. - B. F. Skinner Sign In·View Thread·PermaLink Re: 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. Sign In·View Thread·PermaLink Re: 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 Web: Yahoo 360° , MSN Spaces Education is what survives when what has been learned has been forgotten. - B. F. Skinner Sign In·View Thread·PermaLink Re: 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 -- modified at 8:02 Saturday 23rd September, 2006 Deobrat Singh Mumbai, India Web: Yahoo 360° , MSN Spaces Education is what survives when what has been learned has been forgotten. - B. F. Skinner Sign In·View Thread·PermaLink Re: Watermark library and single quotes pbishop 4:30 30 Aug '06   Works great! Thanks! Sign In·View Thread·PermaLink Atlas can do this too with control extenders Robert Ensor 21:12 22 Aug '06   ... if you feel like installing it. http://atlas.asp.net/[^] Sign In·View Thread·PermaLink Re: 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 Web: Yahoo 360° , MSN Spaces Education is what survives when what has been learned has been forgotten. - B. F. Skinner Sign In·View Thread·PermaLink 2.00/5 Validators? 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. Sign In·View Thread·PermaLink Re: 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 Web:  Yahoo 360° , MSN Spaces Education is what survives when what has been learned has been forgotten. - B. F. Skinner Sign In·View Thread·PermaLink Re: 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? Sign In·View Thread·PermaLink 1.00/5 FireFox 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 Sign In·View Thread·PermaLink Re: 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 -- modified at 8:03 Saturday 23rd September, 2006 Deobrat Singh Mumbai, India Web: Yahoo 360° , MSN Spaces Education is what survives when what has been learned has been forgotten. - B. F. Skinner Sign In·View Thread·PermaLink Re: 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 Web: Yahoo 360° , MSN Spaces Education is what survives when what has been learned has been forgotten. - B. F. Skinner Sign In·View Thread·PermaLink Re: FireFox Problem asifrazach 3:08 23 Aug '06   Thanks It is Now Working fine with the FireFox. Sign In·View Thread·PermaLink CSS 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"> Sign In·View Thread·PermaLink

Last Visit: 18:56 22 Nov '09     Last Update: 18:56 22 Nov '09 12 Next »