Capitalize the first letters of words with jQuery?

API & Customization
1

Has anyone successfully implemented a jQuery or javascript code that targets a specific user input field (like name or address) so it formats it with capitalization even if the user inputs all lowercase or all capitalized.

I've tried a few different snippets from the web, but can't get it to work, or if it does work, it does it for EVERY field, and not a specific targeted one.

Any help or advice would be super helpful. Thank you!!!

2

Thanks Sam - that's great.

3

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

});

});

 

4

That's perfect! Thanks so much again Bgiegel!

5

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

});

});

 

6

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"?

7

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

8

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.
9

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?

10

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.