aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies create watermark text for textbox in javascript

Oct 6, 2011

In this article I will explain how to create or set watermark text for textbox using JavaScript.


One day I got requirement like showing watermark text in textbox to achieve this requirement I used JavaScript functionality for that first Design your aspx page like this 

<html xmlns="">
<head runat="server">
<title>Watermark Textbox Using JavaScript</title>
<script language="javascript" type="text/javascript">
function WaterMark(txtName, event) {
var defaultText = "Enter Username Here";
// Condition to check textbox length and event type
if (txtName.value.length == 0 & event.type == "blur") {
//if condition true then setting text color and default text in textbox = "Gray";
txtName.value = defaultText;
// Condition to check textbox value and event type
if (txtName.value == defaultText & event.type == "focus") { = "black";
txtName.value = "";
<form id="form1" runat="server">
<asp:TextBox ID="txtUserName" runat="server" Text="Enter Username Here" ForeColor="Gray" onblur = "WaterMark(this, event);" onfocus = "WaterMark(this, event);" />

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Anonymous said...

if we have password text-box too then how to do it in same function?

Anonymous said...

plz provide me code for recovering password and username through mailid in noraml coding

Kimi Björk said...

I am a .Net developer and i know the importance of this post. I m trying to setup this box but facing some problem? what can i do for that ??

Anonymous said...

how to implement watermark method for Textmode='Password'?

Suresh Dasari said...

For watermark method for Textmode='Password' check below post

Unknown said...

Thank you very much

Unknown said...

thank you, its a useful post..:)

rohit gupta said...

it was really good thanks mate

Anonymous said...

thank u

Unknown said...

on first time page load watermark is not working....

Anonymous said...


Anonymous said...

Nice article Suresh

Really u r great buddy

Vivek said...

Sir plz provide me ,how to use progressvar in .

mail me at

Unknown said...

i used javascript validation and watermark in textbox but watermark text insert in table how to avoid this

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.