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):


<script type="text/javascript">
$(document).ready(function() {
   $(".capitalise").capitalise();
});
</script>

Enjoy!

You may also like

Newsletter sign up

Every couple of months we send out an update on what's been happening around our office and the web. Sign up and see what you think. And of course, we never spam.