Description:-
In this example we explain that how to create
watermark text for TextBox in asp.net using javascript or jquery with css. Or create
stylish or effective watermark text in textbox in asp.net.
Here we use jquery and css to create watermark text for textbox in this applicaton in asp.net.here we explain that how to set watermark text for asp.net textbox so user can easily understand what should to be enter in textbox at the time of fillup form.
So how to create fancy watermark text for textbox using javascript/jquery with css in asp.net are as follows
Here we use jquery and css to create watermark text for textbox in this applicaton in asp.net.here we explain that how to set watermark text for asp.net textbox so user can easily understand what should to be enter in textbox at the time of fillup form.
So how to create fancy watermark text for textbox using javascript/jquery with css in asp.net are as follows
Dynamically Bind Data in Ajax Accordion Panel Bind Data to Accordion from databse
Restrict the size of File when Uploaded How to Restrict the size of File when uploaded by user
Using Javascript with css:-
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!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 id="Head1" runat="server">
<title>How to
Create Watermark Text for TexBox in asp.net using jquery</title>
<style type="text/css">
.WaterMarkedTextBox
{
height:
16px;
width:
168px;
padding:
2px 2 2 2px;
border:
1px solid #BEBEBE;
background-color:
#F0F8FF;
color:
gray;
font-size:
8pt;
text-align: center;
}
.NormalTextBox
{
height:
16px;
width:
168px;
}
</style>
<script language="javascript" type="text/javascript">
function
Focus(objname, waterMarkText) {
obj =
document.getElementById(objname);
if
(obj.value == waterMarkText) {
obj.value = "";
obj.className = "NormalTextBox";
if
(obj.value == "User ID" ||
obj.value == "" || obj.value == null) {
obj.style.color = "black";
}
}
}
function
Blur(objname, waterMarkText) {
obj =
document.getElementById(objname);
if
(obj.value == "") {
obj.value = waterMarkText;
if
(objname != "txt_passwd") {
obj.className = "WaterMarkedTextBox";
}
else
{
obj.className = "WaterMarkedTextBox";
}
}
else
{
obj.className = "NormalTextBox";
}
if
(obj.value == "User ID" ||
obj.value == "" || obj.value == null) {
obj.style.color = "gray";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>
Watermark Textbox using JavaScript
and CSS</h3>
</div>
<table>
<tr>
<td>
User Id
</td>
<td>
<asp:TextBox ID="txt_uid" runat="server" onfocus="Focus(this.id,'User ID')" onblur="Blur(this.id,'User
ID')"
Width="126px" CssClass="WaterMarkedTextBox">User ID</asp:TextBox>
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<asp:TextBox ID="txt_passwd" runat="server" onfocus="Focus(this.id,'Password')" onblur="Blur(this.id,'Password')"
Width="126px" CssClass="WaterMarkedTextBox">Password</asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btn_submit" runat="server" Text="Submit" />
</td>
</tr>
</table>
</form>
</body>
</html>
Using code with Jquery and css:-
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!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 id="Head1" runat="server">
<title>How to
Create Watermark Text for TexBox in asp.net using jquery</title>
<style type="text/css">
.watermarkOn
{
color:
#CCCCCC;
font:
Verdana normal 10px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#txt_uid").focus(function () {
$(this).filter(function () { return
$(this).val() == ""
|| $(this).val() == "User
ID" }).removeClass("watermarkOn").val("");
});
$("#txt_uid").blur(function () {
$(this).filter(function () { return
$(this).val() == ""
}).addClass("watermarkOn").val("User ID");
});
$("#txt_passwd").focus(function () {
$(this).filter(function () { return
$(this).val() == ""
|| $(this).val() == "Password"
}).removeClass("watermarkOn").val("");
});
$("#txt_passwd").blur(function () {
$(this).filter(function () { return
$(this).val() == ""
}).addClass("watermarkOn").val("Password");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>
Watermark Textbox using Jquery and
CSS</h3>
</div>
<table>
<tr>
<td>
User Id
</td>
<td>
<asp:TextBox ID="txt_uid" runat="server" Text="User ID" Width="126px" CssClass="watermarkOn"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<asp:TextBox ID="txt_passwd" runat="server" Text="Password" Width="126px" CssClass="watermarkOn"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btn_submit" runat="server" Text="Submit" />
</td>
</tr>
</table>
</form>
</body>
</html>
0 comments:
Post a Comment