The jQuery library provides various options to work
with Textboxes, in this post Asp.Net jQuery Apply style to all Textboxes in
the Page, we shall see on how to set individual style attributes like
color, width, height etc, for an Asp.net Textbox control.
Syntax
To apply the style to all the TextBoxes in the page use the following syntax.
$('input[type="text"]').each(function() {$(this).css("Attribute Name", "Attribute Value") });
To apply the style to a specific textbox use the following syntax.
$('#<TextBoxID>').css("Attribute Name ", "Attribute Value") });
Example
To apply the style to all the TextBoxes in the page
$('input[type="text"]').each(function() { $(this).css("color", "Blue") });
To apply the style to a specific textbox
$('#txtName').css("color", "Blue");
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).css("Attribute Name", "Attribute Value") });
To apply the style to a specific textbox use the following syntax.
$('#<TextBoxID>').css("Attribute Name ", "Attribute Value") });
Example
To apply the style to all the TextBoxes in the page
$('input[type="text"]').each(function() { $(this).css("color", "Blue") });
To apply the style to a specific textbox
$('#txtName').css("color", "Blue");
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() {
$('#cmdSetStyle').click(function(event) {
event.preventDefault();
$('input[type="text"]').each(function() { $(this).css("color", "Blue")
});
$('input[type="text"]').each(function() { $(this).css("font-size", "9pt")
});
$('input[type="text"]').each(function() { $(this).css("border", "1px
solid black") });
});
});
</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 Style </td>
<td><asp:Button
ID="cmdSetStyle"
runat="server"
Text="Set Style" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
Run the application, click on the Set Style button, notice that the style set in the jQuery script gets applied 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