Saturday, March 20, 2010

Use CSS and JavaScript in textbox in .aspx page.

Use CSS and JavaScript in textbox in .aspx page.

 Create a project and add a new .aspx page and then in the aspx page add the following code in the head section.

<style type="text/css">



            text-transform: uppercase;




            text-transform: lowercase;




            text-transform: capitalize;



And then use the above classes in the code as

Typing Text in UPPERCASE

        <br />

        <asp:TextBox ID="TextBox1" runat="server" CssClass="uppercase"></asp:TextBox><br />

        Typing Text in lowercase

        <br />

        <asp:TextBox ID="TextBox3" runat="server" CssClass="lowercase"></asp:TextBox><br />Typing Text in Capatlize

        <br />

        <asp:TextBox ID="TextBox4" runat="server" CssClass="capitalize"></asp:TextBox>

And then when you will type any text in these textboxes then they will appear as per the css class used.

And to use the JavaScript in the .aspx page we need to add the script in the head section and the script in the body section too to use the script we have made in the head section.

The script of head section looks like:

<script type="text/javascript" language="JavaScript">


        function chkNumeric(strString)

        // strString is the string passed to be checked

        // check for valid numeric strings


            // strvalidchars defines the set of characters which are valid in a numeric field

            var strValidChars = "0123456789.-";

            // strings

            var strChar;

            // boolresult is the variable which returns true is string is in correct format or false if it is not a valid numeric string

            var boolResult = true;


            if (strString.length == 0) return false;

            // test strString consists of valid characters listed above

            for (i = 0; i < strString.length && boolResult == true; i++) {

                strChar = strString.charAt(i);

                if (strValidChars.indexOf(strChar) == -1) {

                    boolResult = false;



            return boolResult;



// -->


And the body section will look like


    <form id="form1" runat="server">


        Checking Numbers in textbox using javascript<br />

        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

        <br />

        <script type="text/javascript">

            function fun() {

                if (document.form1.TextBox2.value.length == 0) {

                    alert("Please enter a value.");


                else if (chkNumeric(document.form1.TextBox2.value) == false) {

                    alert("Please check - the string conatins non numeric value!");





        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="fun()" />




And in the body section I have added the script and a button to use that script.

For more clarifications please view the video at:



Thanks and Regards
Meetu Choudhary
Microsoft MVP (ASP.Net)
DNS MVM Awardee | Microsoft Certified Professional | Microsoft Certified Technology Specialist |
Co-founder / Webmaster : | | | Lead Editor / Webmaster : |  | | | My Blog : | My Profile :

No comments:

Post a Comment

Subscribe via email

Enter your email address:

Delivered by FeedBurner


MSDotnetMentor My Website