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

Answer 3

I took the tips here and have formulated something a little easier using standard javascript. I needed to capitalize the each word of an input box on an iPad Web App, autocapitalize was failing to work consistently. Here's the work around:

HTML Input

<input type="text" id="this_input" name="this_input" onkeyup="javascript:capitalize(this.id, this.value);">

Javascript

<script type="text/javascript">
  function capitalize(textboxid, text) {
      // string with alteast one character
      var i, words, w, result = '';

    words = text.split(' ');

    for (i = 0; i < words.length; i += 1) {
        w = words[i];
        result += w.substr(0,1).toUpperCase() + w.substr(1);
        if (i < words.length - 1) {
            result += ' ';    // Add the spaces back in after splitting
        }
    }
      document.getElementById(textboxid).value = result;
  }
  </script>

Answer 4

My simple implementation of a capitalize function splits up a string by spaces and capitalizes the first letter of each word. It assumes each word is divided by at least one space.

function capitalize(text) {
    var i, words, w, result = '';

    words = text.split(' ');

    for (i = 0; i < words.length; i += 1) {
        w = words[i];
        result += w.substr(0,1).toUpperCase() + w.substr(1);
        if (i < words.length - 1) {
            result += ' ';    // Add the spaces back in after splitting
        }
    }

    return result;
}

Example console output:

> capitalize("some tEsT e strING a B c 1 2 3")
  "Some TEsT E StrING A B C 1 2 3"

Answer 5

You're going to want an event handler for the DOM object in question--specifically, the keypress event handler. You'll need to read the text of the input field after each key press to ensure that all words (text surrounded by spaces) have the first character capitalized.

For instance:

$('form#formid input[type=text]').keypress(function(event) {
// Function body goes here
});

As a general strategy, I recommend splitting the value of the input field by spaces (using str.split(" ");). Then, iterate through each of the resulting strings. For each string, slice off everything after the first letter, and append a capitalized first character to the sliced string. You can see other answers show you how to do this. Combine all these strings into one and set the value of the input to this capitalized string.

Answer 6

version with event binding built in

Simpl use

$('input[type="text"]').capitalize()

http://jsfiddle.net/uUjgg/

(function($) {

$.fn.capitalize = function() {
    return this.each(function() {
        var $field = $(this);

        $field.on('keyup change', function() {
            $field.val(function(i, old) {
                if (old.indexOf(' ') > -1) {
                    var words = old.split(' ');
                    for (i = 0; i < words.length; i++) {
                        words[i] = caps(words[i]);
                    }
                    return words.join(' ');
                } else {
                    return caps(old);
                }
            });
        });
    });

    function caps(str) {
        return str.charAt(0).toUpperCase() + str.slice(1);
    }
};

})(jQuery);