Please disable your adblock and script blockers to view this page
 

Convert text to uppercase or lowercase while typing in Asp.Net textbox using CSS

Introduction: In this article you will learn the following:
  1. How to automatically convert text to upper case while typing in textbox. 
  2. How to automatically convert text to lower case while typing. 
  3. How to automatically capitalize first letter/character of each word being entered in textbox.

Description: Sometimes we want to restrict the user to enter text in specific case e.g. uppercase, lowercase or first letter capital of each word. It can be easily done using the text-transform  property of CSS(Cascading Style Sheet) as demonstrated below. 

Implementation: Let’s create a demo page for demonstration purpose.

HTML Source
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .uppercase {
            text-transform: uppercase;
        } 
        .lowercase {
            text-transform: lowercase;
        } 
        .capitalize {
            text-transform: capitalize;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>Text in upper case</td>
                    <td>
                        <asp:TextBox ID="txtUpperCase" CssClass="uppercase" runat="server" /></td>
                </tr>
                <tr>
                    <td>Text in lower case</td>
                    <td>
                        <asp:TextBox ID="txtLowerCase" CssClass="lowercase" runat="server" /></td>
                </tr>
                <tr>
                    <td>Capitalize first letter of each word</td>
                    <td>
                        <asp:TextBox ID="txtCapitalize" CssClass="capitalize" runat="server" /></td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

 Now over to you:
"A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."
Previous
Next Post »

2 comments

Click here for comments
March 26, 2016 ×

Thanks for your valuable feedback.Stay connected and keep reading for more updates.

Reply
avatar

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily.. ConversionConversion EmoticonEmoticon