By

Capitalise text inputs with css

When I was build the sign-up screen for toepoke I wanted to tidy up the data entry for the player’s name so you get capitalised names.

My first thought was to tie into the jQuery focus event and do a little JavaScript once the user left the input field.

Thankfully I thought a little bit more and remembered the text-transform property in CSS, and wondered if this would work against text input fields as well as heading and paragraph tags, etc.

.tcase {
    text-transform: capitalize;
}

Turns out it works quite well, and the above works under most of the modern browsers.  Tested and works in Chrome 7,IE 8, FF 3.6, Safari 5, but sadly not Opera 10.  Of course the text-transform property is an aesthetic effect, so I can live with it not working in Opera. 

Also bear in mind if the user enters their name in lowercase, their name will be in lowercase when the form is posted to the server, so you’ll still need to capitalise on the server-side.  Something like the following C# string extension should do the trick. (or see totitle … as kindly pointed at by Maarten van der Lee below):

     /// <summary>
    /// Converts the input string into an initial version, so “fred” or “FRED” becomes “Fred”
    /// </summary>
    /// <param name=”input”></param>
    /// <returns></returns>
    public static string ToInitial(this string input)
    {
        if (string.IsNullOrEmpty(input))
            return “”;
        return 
            input.FirstOrDefault().ToString().ToUpper() +
            input.Substring(1).ToLower();
    }

You can see the above in action on our sign-up page. Naturally this can be extended to use the uppercase and lowercase text-transform rules (uppercase is quite useful for postcodes too).

Hope this proves useful for someone.

Posted in : css, code, development, techie-stuff

Written by
Founder, Developer, tea maker