Digicorp

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.

This entry was posted on Monday, June 22nd, 2009 at 10:52 pm and is filed under asp.net. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.