Capitalize the first letters of words with jQuery?

Answered

Comments

9 comments

  • Avatar
    Brad Stevens

    Great question John - had been thinking of implementing this for some time and finally got around to it.  This borrows heavily from Nic Galluzzo's excellent post here http://helpdesk.knackhq.com/support/discussions/topics/5000041382 (thanks Nic).

    Add this to the top of your Javascript:

    //Function to capitalise first character for strings
    function capitalizeFirstLetter(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }

    Then add this either inside an existing render.any event or a new one:

    $(document).on('knack-view-render.any', function (event, view, data) {
    // Remove #field_1 so it works for ALL inputs
        $('input#field_1').keyup(function() {
            this.value = capitalizeFirstLetter(this.value);
        });
    });

    You could do without the separate function but I prefer using functions for anything repeated.

  • Avatar
    John Katez

    Hey Brad,


    Thanks for your help. I pasted your two lines of code and I changed knack-view-render.any to knack-view-render.view242 and field_1 to field_261. Still doesn't seem to work when I test it though, am I missing something?

  • Avatar
    Brad Stevens

    I suggest problem solving:

    1. Revert back to the render.any event to see if that works - that might suggest it's a different view number.
    2. Then try to see if Nic's uppercase code works for that field (or even calling a simple alert() on the keyup event) - if that works then it's the code and instead of calling a function try modifying the code to work in-line.
  • Avatar
    Bgiegel

    Using 'input#field_202" would not work, but 'input#first, input#last' worked for me on a name field.

  • Avatar
    John Katez

    Awesome that works perfect Bgiegel! Thank you. Is there an additional script to prevent all uppercase entries? So the input field would have to be "First Last" and they can't enter "FIRST LAST"?

  • Avatar
    Bgiegel

    Here is what I found to work for lowercase and uppercase.

    //Function to capitalise first character
    function capitalize (text) {
        return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
    }
    
    $(document).on('knack-view-render.view_261', function (event, view, data) {
        $('input#first, input#last, input#city, input#street, input#street2').keyup(function() {
            this.value = capitalize(this.value);
        });
    });

     

  • Avatar
    John Katez

    That's perfect! Thanks so much again Bgiegel!

  • Avatar
    Sam Carney

    I needed the first letter of each word capitalized. This works for me!

    you may not need "input#field_213, input#field_214". For me they were simple text fields I used to store names. 

    function toTitleCase(str)
    {
        return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
    }
    
    $(document).on('knack-view-render.any', function (event, view, data) {
        $('input#first, input#last, input#city, input#street, input#street2, input#field_213, input#field_214').keyup(function() {
            this.value = toTitleCase(this.value);
        });
    });

     

  • Avatar
    Brad Stevens

    Thanks Sam - that's great.

Please sign in to leave a comment.