JavaScript Code to Capitalize Text Inputs

Question

I'm using the popular Firefox extension Greasemonkey.

I'd like to know if there was a way to capitalize all text inputs in a certain form, so if I would use jQuery the code would look something like:

$('form#formid input[type=text]').capitalize();

Now of course I know .capitalize() is not a valid function, and in order to capitalize text you'd need a complicated JavaScript code, but after all the Googling, I could not find one that seemed like it could be implemented into Greasemonkey.

Can anybody help me to write this script?

By capitalize, I mean capitalizing the first letter of each word, like the CSS text-transform:capitalize; and it must override the letters the user might put in, maybe doing it on form submit would be easier...

Thanks.

Answer 1

//add a function to jQuery so we can call it on our jQuery collections
$.fn.capitalize = function () {

    //iterate through each of the elements passed in, `$.each()` is faster than `.each()
    $.each(this, function () {

        //split the value of this input by the spaces
        var split = this.value.split(' ');

        //iterate through each of the "words" and capitalize them
        for (var i = 0, len = split.length; i < len; i++) {
            split[i] = split[i].charAt(0).toUpperCase() + split[i].slice(1);
        }

        //re-join the string and set the value of the element
        this.value = split.join(' ');
    });
    return this;
};

Here is a demo: http://jsfiddle.net/jasper/qppGQ/1/

This could be used inside an event handler to always keep a capitalized body of text:

//when the user presses a key and the value of the `textarea` is changed, the new value will have all capitalized words
$('textarea').on('keyup', function () {
    $(this).capitalize();
}).capitalize();//also capitalize the `textarea` element(s) on initialization

Here is a demo: http://jsfiddle.net/jasper/qppGQ/2/

Update

To have the first letter be capitalized and the rest of the word be lowercase we can just use .toLowerCase() in the remainder of the string after capitalizing the first letter:

        ...
        for (var i = 0, len = split.length; i < len; i++) {
            split[i] = split[i].charAt(0).toUpperCase() + split[i].slice(1).toLowerCase();
        }
        ...

Here is a demo: http://jsfiddle.net/jasper/qppGQ/3/

Answer 2

Is this what you are trying to do?

(function ($) {

    $.fn.capitalize = function () {
        return this.val(function (i, oldValue) {
            return oldValue.charAt(0).toUpperCase() + oldValue.slice(1);
        });
    };

})(jQuery);

If you wanted to perform this action in "realtime", you could just process the action inside of an event:

(function ($) {

    $.fn.capitalize = function () {
        this.on('keyup.capitalize change.capitalize', function () { 
            $(this).val(function (i, oldValue) {
                return oldValue.charAt(0).toUpperCase() + oldValue.slice(1);
            });
        });
    };

})(jQuery);