.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Code Snippets >> JQuery >> Post New Resource Bookmark and Share   

 Subscribe to Code Snippets

Make first character of textbox to uppercase using JQuery

Posted By:JQuery Developer       Posted Date: May 17, 2013    Points: 40    Category: JQuery    URL: http://www.dotnetspark.com  

Below JQuery code can be used to convert the 1st character to caps or uppercase in a web form.
 

Sometimes you need to make only 1st character of the input string to capital. for example First name textbox which is very common in registration form or contact form and all user want to have the value entered value should be caps. Using JQuery we can easily do that.

below is the example for converting first character of the string to caps for a particular textbox

$(document).ready(function () {
    $('#txtName').keyup(function (evt) {
        var txtBoxValue = $(this).val();
        txtBoxValue = txtBoxValue.substring(0, 1).toUpperCase() + txtBoxValue.substring(1);
        $(this).val(txtBoxValue);
    });
});

View Demo

similarly if you would like to have similar behavioud for all the text box available in the form you can use below code

$(document).ready(function () {
    $('input[type="text"]').keyup(function (evt) {
        var txtBoxValue = $(this).val();
        txtBoxValue = txtBoxValue.substring(0, 1).toUpperCase() + txtBoxValue.substring(1);
        $(this).val(txtBoxValue);
    });
});

 

View Demo


Full HTML Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>My Page Title</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('#txtName').keyup(function (evt) {
                var txtBoxValue = $(this).val();
                txtBoxValue = txtBoxValue.substring(0, 1).toUpperCase() + txtBoxValue.substring(1);
                $(this).val(txtBoxValue);
            });
        });


    </script>
</head>
<body>
    <input type="text" id="txtName" value="" />
</body>
</html>

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More code samples in C#, ASP.Net, Vb.Net and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend