“Capitalise” jquery extension

Sometimes there is a requirement to capitalise certain text input elements in web forms, i.e. to make just the first symbol uppercase when the user inputs details. This is often useful in fields like “first name”, “last name” etc.

The code to handle this is an extremely simple one, but I thought I may share my implementation here with you and save you some precious time. Here it is:

//
// Revium jquery extensions
// Copyright (c) 2009 Revium pty ltd http://revium.com.au
// Licensed under the GPL licence:
// http://www.gnu.org/licenses/gpl.html
//

(function($) {
    // To capitalise text input when user types in (to make just the 1st symbol uppercase)
    // Developed by Evgeny Petrov, Revium
    // Ver 1.0, 24/11/2009
    $.fn.capitalise = function() {
        $(this).keyup(function() {
            var el = $(this);
            var value = "";
            if (el.length > 0) {
                value = el.val().toString().substr(0, 1).toUpperCase() + el.val().toString().substr(1);
            }
            el.val(value);
        });
    }
})(jQuery);

This is how you may use it (all inputs with class “capitalise” will be capitalised):

Enjoy!

Update

I was just advised that the same may be easily achieved by using pure css. Fair enough – 2 options are better than none!

input { text-transform: capitalize; }

Please be aware though that the css option doesn’t actually change the text, it just shows it capitalised. So when you submit your form, your inputs will not be capitalised.

Related posts:

1. ASP.NET selectors in jquery
2. jQuery image captions
3. ASP.NET Button – prevent double clicks part 2
4. Power of the ASP.NET MVC + jquery
5. Developing faster web forms in .NET

Tags: jquery