You should try this out, a very short and simple code for a watermark plugin. You need 2 files, first the jQuery library, secondly jquery.tinywatermark-3.1.0.js, when you add references you should follow the same order. You can get the plugin files from the below link, it also consists of some demo controls as well.

http://www.weblap.ro/res/tinywatermark/demo.php

Code sample,

$("#mytextbox").watermark('watermark', 'Please type something')

It works in all browsers, but unfortunately I came across a situation in chrome few days ago. Following is the error message I got when I focus on the input control.

“Uncaught Error: NOT_FOUND_ERR: DOM Exception 8”
 

Error came from the replaceWith() method, it seems the DOM representation for the internal variable cannot be found, so replacing of elements cannot happen. But the same code is working fine in Firefox. It confused me a lot. But after some struggle, came up with a fix. You have to change the code in the plugin a bit. Replace the code inside the focus event with the following.

try {
   $c.replaceWith(i);
} catch (r) {
   $("#" + $c.attr('id')).replaceWith(i);
}
setTimeout(function () { i.focus(); }, 1);

NOTE: This plugin is usually working fine, I guess this is a special scenario. So avoid updating your js file if you don’t get any errors.

Have fun!!!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s