In this article i will show you how to change style of ASP.net Textbox control using JQuery.
Step 1
Download JQuery Script from the following Link
http://code.jquery.com/jquery-1.6.1.min.js
Step 2
Create a Web Application and give the Solution name as SolTextBoxStyleonFocus_JQuery
Step 3
Create a sample form and apply the Focus effect using jQuery,it is look like this
Step 4
Add jQuery file Reference inside the head tag of the page,it is look like this
Step 5
Create a style class inside the head tag to apply to the focused field,it is look like this
Write jQuery script to add effect to the form elements. Two events has to be taken care of. While the input field is focused and while the focus is moved to next textbox (blured),it is look like this
Run the Project.
Output
Click on image for better view
Full .Aspx code
Download
Download Source Code
Step 1
Download JQuery Script from the following Link
http://code.jquery.com/jquery-1.6.1.min.js
Step 2
Create a Web Application and give the Solution name as SolTextBoxStyleonFocus_JQuery
Step 3
Create a sample form and apply the Focus effect using jQuery,it is look like this
<form id="form1" runat="server">
<div>
<table border="0" cellpadding="10" cellspacing="5" width="40%" align="center">
<tr>
<td>First Name</td>
<td>
<asp:TextBox ID="TxtFirstName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Last Name</td>
<td>
<asp:TextBox ID="TxtLastName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Age</td>
<td>
<asp:TextBox ID="TxtAge" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
</form>
Step 4
Add jQuery file Reference inside the head tag of the page,it is look like this
Step 5
Create a style class inside the head tag to apply to the focused field,it is look like this
Step 6
Write jQuery script to add effect to the form elements. Two events has to be taken care of. While the input field is focused and while the focus is moved to next textbox (blured),it is look like this
Run the Project.
Output
Click on image for better view
Full .Aspx code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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">
<title>TextBox Style on Focus using Jquery</title>
<style type="text/css">
.TxtBoxFocus
{
border:2px solid Orange;
background-color:Silver;
}
</style>
<script src="Scripts/jquery-1.6.1.min.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
// On Focus
$('input[type="text"]').focus(function () {
$(this).addClass("TxtBoxFocus");
});
// On Blur
$('input[type="text"]').blur(function () {
$(this).removeClass("TxtBoxFocus");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="0" cellpadding="10" cellspacing="5" width="40%" align="center">
<tr>
<td>First Name</td>
<td>
<asp:TextBox ID="TxtFirstName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Last Name</td>
<td>
<asp:TextBox ID="TxtLastName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Age</td>
<td>
<asp:TextBox ID="TxtAge" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Download
Download Source Code
No comments:
Post a Comment