This article I will show you how you how you can display the
watermark in a password textbox using jQuery in asp.net. So for this article we
will learn to display watermark in a password textbox using jQuery in asp.net.
This article will cover following topics simple way to provide watermark Text
to ASP.NET Textbox, Display watermark text when textbox Textmode=Password.
Some of my previous articles are as follows: How
to Use jQuery Calender In MVC3 | jQuery UI Datepicker Calender Control In
Asp.Net Mvc Application, jQuery
Validation for Terms and Conditions Checkbox in Asp.Net, Code
to Select All Checkbox in GridView in Asp.Net Using jQuery, jQueryUI
Tooltip Using jQuery on Textbox MouseOver in Asp.Net, Show
and Hide Div on Button Click Using jQuery in Asp.Net | How to Use jQuery Toggle
Function on Click In Asp.net.
So first we will download some jquery library for completing
this article.
So for this article first we will create an asp.net
application and add the above jQuery library reference after downloading in out
project.
So after completing all above activity we will use the below
code to display the water mark in a textbox of asp.net using jQuery.
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WaterMark_TextBox_Asp.net.Default"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.watermark.min.js" type="text/javascript"></script>
<title>Display
Watermark Text in a Password TextBox Using jQuery In Asp.Net</title>
<script language="javascript">
$(function
() {
$("#txtusername").watermark("Enter your username");
$("#txtpassword").watermark("Enter your password");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset>
<legend>Watermark
in a password TextBox</legend>
<ol>
<table width="100%" cellspacing="3" cellpadding="3">
<tr>
<td align="right">
Username :
</td>
<td align="left">
<asp:TextBox ID="txtusername"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right">
Password :
</td>
<td align="left">
<asp:TextBox ID="txtpassword"
runat="server"
TextMode="Password"></asp:TextBox>
</td>
</tr>
</table>
</ol>
</fieldset>
</div>
</form>
</body>
</html>
|
Please check the below jQuery code to display the water mark
|
<script language="javascript">
$(function
() {
$("#txtusername").watermark("Enter your username");
$("#txtpassword").watermark("Enter your password");
});
</script>
|
Now run the application to check the functionality.
DOWNLOAD
About the Author
This code fails because ASP.NET does render txtusername with the same name. Please don't post code if it doesn't remotely work.
ReplyDeletevery good example and easy to understand.
ReplyDelete