Creating watermark style to textbox with JQuery
What Will I Learn?
- You will learn creating watermark style to textbox with JQuery.
Requirements
- JQuery
- Asp.net
Difficulty
- Intermediate
Creating watermark style to textbox with JQuery
Step 1
Let’s start to create a simple page with two textbox using visual studio as below.
Design Output
HTML Code
<html>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<table cellpadding="2" width="250px" style="border:solid 1px gray;" cellspacing="2">
<tr>
<td colspan="3" align="center">
<b>Welcome to Signin</b>
</td>
</tr>
<tr>
<td colspan="3" style="height: 5px;">
</td>
</tr>
<tr>
<td>
User Name
</td>
<td>
:
</td>
<td>
<asp:TextBox ID="txtusername" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
:
</td>
<td>
<asp:TextBox ID="txtpass" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="3" style="height: 5px;">
</td>
</tr>
<tr>
<td colspan="3" align="right">
<asp:Button ID="btnSign" runat="server" Text="Sign In" />
</td>
</tr>
</table>
</form>
</body>
</html>The above login is screen is very simple screen has two input field with one button. Now I’m going to work for display water mark for both input fields. To that we have to import JQuery library and then have to write a simple CSS to apply for water mark with JQuery.
Step 2
Import JQuery library from Google under the HEAD section, like below
<head runat="server">
<title>The Watermark Demonstration</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
</head>Step 3
Let’s create a simple style to apply watermark effect to username and password textbox.
<head runat="server">
<title></title>
<style type="text/css">
.watermarkOn
{
color: #CCCCCC;
font:Verdana normal 10px;
}
</style>
</head>Note: When you are work real world web application down write your style sheet within the page. Its increase your page size and Browser does NOT cache your CSS. So better to write as separate CSS file and import in your into your page.
Step 4
Let’s apply the default style effect to textbox. Because when user does not focus the input field, we have to show the watermark, if focused, we have to clear style.
Html Code
<tr>
<td>
User Name
</td>
<td>
:
</td>
<td>
<asp:TextBox CssClass="watermarkOn" Text="UserName" ID="txtusername" runat="server"></asp:TextBox>
</td>
</tr>In above snippets, I have applied the default watermarkon style and default text for the user name input field. Apply same to password input field as well.
Step 5
Write few line of JavaScript code to ingrate style and JQuery as like below,
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#txtusername").focus(function() {
$(this).filter(function() {
return $(this).val() == "" || $(this).val() == "UserName"
}).removeClass("watermarkOn").val("");
});
$("#txtusername").blur(function() {
$(this).filter(function() {
return $(this).val() == ""
}).addClass("watermarkOn").val("UserName");
});
$("#txtpass").focus(function() {
$(this).filter(function() {
return $(this).val() == "" || $(this).val() == "Password"
}).removeClass("watermarkOn").val("");
});
$("#txtpass").blur(function() {
$(this).filter(function() {
return $(this).val() == ""
}).addClass("watermarkOn").val("Password");
});
});
</script>In above code line, I just apply style and remove for two events. When user focus input field, remove style class.
.removeClass("watermarkOn").val("");As like within in the onblur event, add stlye again to inout field.
.addClass("watermarkOn").val("UserName");Note: When we are adding watermark style, we have to add default text to input filed.
Let’s run application. output will be like follow,
With Master Page
If you are use the master page above code does not work,beuase when we are use the master page ASP.NET add prefix to all server controls ct100_.... so we have to modify the code work to all situation.
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("[id$=txtusername]").focus(function() {
$(this).filter(function() {
return $(this).val() == "" || $(this).val() == "UserName"
}).removeClass("watermarkOn").val("");
});
$("[id$=txtusername]").blur(function() {
$(this).filter(function() {
return $(this).val() == ""
}).addClass("watermarkOn").val("UserName");
});
$("[id$=txtpass]").focus(function() {
$(this).filter(function() {
return $(this).val() == "" || $(this).val() == "Password"
}).removeClass("watermarkOn").val("");
});
$("[id$=txtpass]").blur(function() {
$(this).filter(function() {
return $(this).val() == ""
}).addClass("watermarkOn").val("Password");
});
});
</script>If you are going to apply watermark style with master,please use the above code.
Output
Conclusion
In this tutorial I have explained, how to apply water mark effect to input filed with JQuery and CSS.
Posted on Utopian.io - Rewarding Open Source Contributors
Your contribution cannot be approved because it does not follow the Utopian Rules, and is considered as plagiarism. Plagiarism is not allowed on Utopian, and posts that engage in plagiarism will be flagged and hidden forever.
Plagiarised from here.
You can contact us on Discord.
[utopian-moderator]
Congratulations @alv! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
Click on any badge to view your own Board of Honor on SteemitBoard.
To support your work, I also upvoted your post!
For more information about SteemitBoard, click here
If you no longer want to receive notifications, reply to this comment with the word
STOP