When textbox is empty, it show the watermarked text. When it get focus the watermarked text disappears. When it lost focus the watermarked text appears if there is no text.

Code Snippet

function AddWatermark(txt, watermark)
   if (txt.value == '') txt.value = watermark;  

function RemoveWatermark(txt, watermark) 
    if (txt.value == watermark) txt.value = '';

Sample Usage

<input type="text" id="txt1" onfocus="RemoveWatermark(this, this.value);"  onblur="AddWatermark(this, this.value);" value="Your text here" />


Switch the style of the textbox if you want to differentiate watermarked text and normal text.

author's photo

Author : Blue Cloud

Just a normal software developer who love to write code. Developing professional software since 1999. After working in the software industry for many years, I've started my own website to share knowledges and experiences.

blog comments powered by Disqus