Wednesday, December 15, 2010

jQuery watermark plugin

Lately I have been doing a lot of dynamic form input creation in my projects. In several situations it didn't made sense to use form labels; so my search began for a watermark script.

I found a script called jupdnWatermark that took the approach of overlaying a label absolutely positioned with a span as its anchor. This method seemed like a good idea because you didn't have to worry about submitting the watermark data and filtering it. However, it created a major pain when it came to CSS. In almost every situation I ran into my css rules would distort those applied by the script. When I finally got that hashed out I noticed that in Safari and Chrome the first label was always higher than those following it. Eventually I gave up on that approach.

Next, I turned to jfieldtag. It actually places the watermark values in each of the inputs, successfully avoiding the CSS mess. The problem with it was that it wouldn't work on dynamically generated form elements. I am not sure why, but didn't take much time to investigate.

I finally got so frustrated that I wrote my own plugin called jDigitalWatermark. I will be posting it later on today once it passes my testing.