The jQuery library provides various options to work
with Textboxes, in this post Asp.Net jQuery Apply css class to all Textboxes
in the Page, we shall see on how to set individual css classes for Asp.net
Textbox controls.
Syntax
To apply the style to all the TextBoxes in the page use the following syntax.
$('input[type="text"]').each(function(){$(this).addClass("css class name") });
To apply the style to a specific textbox use the following syntax.
$('#<TextBoxID>').addClass("css class name");
Example
To apply the style to all the TextBoxes in the page
$('input[type="text"]').each(function() { $(this).addClass("TextRed") });
To apply the style to a specific textbox
$('#txtName').addClass("TextRed");
Here is a full example
To apply the style to all the TextBoxes in the page use the following syntax.
$('input[type="text"]').each(function(){$(this).addClass("css class name") });
To apply the style to a specific textbox use the following syntax.
$('#<TextBoxID>').addClass("css class name");
Example
To apply the style to all the TextBoxes in the page
$('input[type="text"]').each(function() { $(this).addClass("TextRed") });
To apply the style to a specific textbox
$('#txtName').addClass("TextRed");
Here is a full example
<html xmlns="http://www.w3.org/1999/xhtml"
>
<head runat="server">
<head runat="server">
<title>TextBox</title>
<link type="text/css"
href="Stylesheet.css"
rel="Stylesheet" />
<script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<script
type="text/javascript"
language="javascript">
$(document).ready(function() {
$('#cmdSetCssClass').click(function(event) {
event.preventDefault();
$('input[type="text"]').each(function() { $(this).addClass("RedText") });
});
});
</script>
</head>
<body>
<form id="frmTextBox" runat="server">
<div id="pageControls">
<table>
<tr>
<td>Name</td>
<td><asp:TextBox
id="txtName"
runat="server"
MaxLength="100"></asp:TextBox></td>
</tr>
<tr>
<td>Age</td>
<td><asp:TextBox
id="txtAge"
runat="server"
MaxLength="25"></asp:TextBox></td>
</tr>
<tr>
<td>Address</td>
<td><asp:TextBox
ID="txtAddress"
runat="server"
MaxLength="200"></asp:TextBox></td>
</tr>
<tr>
<td>Phone</td>
<td><asp:TextBox
ID="txtPhone"
runat="server"
MaxLength="20"></asp:TextBox></td>
</tr>
<tr>
<td>Email</td>
<td><asp:TextBox
ID="txtEmail"
runat="server"
MaxLength="30"></asp:TextBox></td>
</tr>
<tr>
<td>Set Css Class </td>
<td><asp:Button
ID="cmdSetCssClass"
runat="server"
Text="Set Css Class" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
Run the application, click on the Set Css Class button, notice that the style defined in the css class is set to the TextBoxes immedietly.
Related Posts
Asp.Net jQuery get Textbox Values
Asp.Net jQuery Textbox set ReadOnly
Asp.Net jQuery Textbox Remove ReadOnly
Asp.Net jQuery Textbox Disable
Asp.Net jQuery Textbox Enable
No comments:
Post a Comment