How to create a water mark text box in asp.net/C# using javascript
In some scenario in the project, we need to implement water mark text for each textboxes in the form. It will help user to give right direction to enter proper and valid entries for each textboxes. We can achieve this water mark text boxes easily by using javascript methods.
Javascript method to create water mark text boxes in ASP.Net/C# using javascript
Here we are going to create a small asp.net application to show example of water mark text box creation. In aspx page we are having a textbox for username and a button. In the textbox it will show ‘Enter username’ as water mark style with gray color. When a user click mouse on to the textbox it will hide. Once the user leave the mouse pointer from the textbox without enter any data, it will display water mark text.
ASPX PAGE WITH JAVASCRIPT FOR WATER MARK TEXTBOX
<!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>Watermark Textbox Using JavaScript</title>
<script language="javascript" type="text/javascript">
function WaterMark(txtName, event) {
var defaultText = "Enter Username";
// 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 = "";
}
}
function WaterMarkPwd(txtName, Password) {
var defaultText = "Enter Password";
// 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" ForeColor="Gray"
onblur="WaterMark(this, event);" onfocus="WaterMark(this, event);" />
<asp:Button runat="server" ID="btnLogin" Text="Login" />
</div>
</form>
</body>
</html>
No comments:
Post a Comment