
You can replace it with a name of your choice for the plugin. The syntax for it is as follows:Īs we see above, inputWatermark is the name of our plugin. JQuery plugins are JavaScript function properties added to the jQuery.fn object from the jQuery library. We will go step by step on how to create the jQuery Plugin.

To get the same effect across all browsers we will develop a small jQuery plugin that will take the placeholder value provided and applies the watermark effect across all browsers. Gives us the following out put on IE9, Firefox 12 and Chrome 19.Īs we can see above, IE9 does not support this effect. But like all things, not all browsers support HTML5 yet. This effect has become so popular that it is now supported in HTML5 elements through an attribute called ‘placeholder’. Here when we start typing on the Username or the Password textbox, the text vanishes allowing you to put in your username and passwordĪpart from the above use case, it is often used to show sample data or expected formatting. In such scenarios, the TextBox has a watermark that stays on till a user starts typing.


A ‘TextBox Watermark’ is an UI effect that is often employed in space constrained scenarios where putting in a label next to a text box explaining the purpose of the textbox is not possible.
