Capitalise the first letter of each word within a certain class

Question

Is it possible to capitalise the first letter of each word in a certain class name using jQuery / javascript? I just want to capitalise the first letter of each word of all the fields marked with the class 'capital'.

I just want it to do it as they type, and I know you can do it with css but this is no good as it is stored in the DB as lowercase still.

Answer 1

Here's a simple jQuery plugin that could do this for you:

$.fn.capitalise = function() {
    return this.each(function() {
        var $this = $(this),
            text = $this.text(),
            tokens = text.split(" ").filter(function(t) {return t != ""; }),
            res = [],
            i,
            len,
            component;
        for (i = 0, len = tokens.length; i < len; i++) {
            component = tokens[i];
            res.push(component.substring(0, 1).toUpperCase());
            res.push(component.substring(1));
            res.push(" "); // put space back in
        }
        $this.text(res.join(""));
    });
};

And then call like:

$(".myClass").capitalise();

Here's a working example.