In this article I have explained how to use CSS and jQuery function together.
I will give one example in which I have used CSS for textbox and one jQuery function for validation like numeric value and maximum 3 character allowed.
Example:
Create a CSS for textbox in which height, weight, border, font, text-align etc. is defined.
<style type =”text/css” >
.txt1
{
text-align :center ;
width :60px;
height :22px;
border: 1px solid #000000;
font-family: verdana;
font-size: 10pt;
font-weight:bold ;
}
</style>
Write jQuery function for validation for numeric value and maximum length of the textbox. Bind this function to textbox stylesheet on keypress event.
<script type =”text/javascript” >
$(document).ready(function (){
$(“.txt1″).bind(“keypress”,function(){
var str = (event.srcElement).value;
var len1 = str.length;
if (len1 > 2)
{
event.returnValue=false;
if(!(event.keyCode==45||event.keyCode==46||event.keyCode==48|| event.keyCode==49||event.keyCode==50||event.keyCode==51|| event.keyCode==52||event.keyCode==53||event.keyCode==54|| event.keyCode==55||event.keyCode==56||event.keyCode==57))
{
event.returnValue=false;
}
});
});
</script>
Now apply the CSS to the textbox.
<asp:TextBox ID=”Textbox1″ runat=”server” CssClass=”txt1></asp:TextBox>
By applying this CSS on textbox user can only enter numeric value upto 3 characters and also we have a good looking textbox.
I hope this simple solution will help you somewhere in your project.