Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Asp.net create watermark text for textbox in javascript

Oct 6, 2011
Introduction

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

Description:

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="http://www.w3.org/1999/xhtml">
<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
txtName.style.color = "Gray";
txtName.value = defaultText;
}
// Condition to check textbox value and event type
if (txtName.value == defaultText & event.type == "focus") {
txtName.style.color = "black";
txtName.value = "";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<b>UserName:</b>
<asp:TextBox ID="txtUserName" runat="server" Text="Enter Username Here" ForeColor="Gray" onblur = "WaterMark(this, event);" onfocus = "WaterMark(this, event);" />
</div>
</form>
</body>
</html>
Demo


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

Get the latest Asp.net, C#.net, 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

14 comments :

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...

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

Suresh Dasari said...

For watermark method for Textmode='Password' check below post
http://www.aspdotnet-suresh.com/2012/05/aspnet-set-watermark-text-for-password.html

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....
Vikash
vikk14g@gmail.com

Anonymous said...

bnbn

Anonymous said...

Nice article Suresh

Really u r great buddy

Vivek said...

Sir plz provide me ,how to use progressvar in asp.net .


mail me at vivekpawar965@gmail.com

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 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.