I had a conversation with a client this week talking about records being added and users not capitalising peoples names. I thought I’d share this simple solution with the community and hope its of some use.
Hi @CarlHolmes
This is great and it will work.
This can be done simpler by doing this:
$(document).on('knack-view-render.any', function(_, { key: viewId }) {
$(`#${viewId} #first, #${viewId} #last`).on('keyup', function() {
const input = $(this);
const value = input.val();
if (value) {
input.val(value.charAt(0).toUpperCase() + value.slice(1));
}
});
});
P.S. Either way is perfectly valid and will work this keeps the event handling to a minimum. We have a much neater function to post when I’m at my computer as there are still some issues with this code i.e. McAndrew or O’Neill but they are fringe cases.
You can also add other fields to the the selector like #middle
Craig
1 Like
Thanks @CSWinnall - I appreciate your kind words and bow to you far superior knowledge as a professional coder 
Your version looks a lot simpler, thank you for sharing.
I don’t remember where I picked up the code but it has served me well. I’ll update my library of snippets with this version too 
1 Like
Here is the code that I said I’d post. This code will capitalise the first letter for any field added to the FIELDS_TO_CAPITALISE array. If you pass in a second parameter to each object in the array allCaps: true, this will capitalise all the letters in the input. I’ve added some examples of fields you may want to capitalise:
First add the const for fields you want to capitalise first letter on
const FIELDS_TO_CAPITALISE = [
{selector: '#zip', allCaps: true},
{selector: '#first'},
{selector: '#last'},
{selector: '#middle'},
{selector: '#street'},
{selector: '#street2'},
{selector: '#city'},
{selector: '#country'},
// More fields can be added here
];
Now add these functions:
/** Capitalises the input text based on the specified criteria.
* @param {string} viewId - The ID of the view containing the input element.
* @param {string} inputSelector - The selector for the input element within the view.
* @param {boolean} [allCaps=false] - Pass in True if you want all caps. */
function capitaliseInput(viewId, inputSelector, allCaps = false) {
if (!viewId) return;
const input = $(`#${viewId} ${inputSelector}`);
if (!input.length) return;
input.on('blur', function () {
const textInput = $(this);
const str = textInput.val();
const id = textInput.attr('id');
const capitaliseWord = (word) => {
if (id === 'last') {
// Capitalise first letter, letter after hyphen, and letter after apostrophe
return word.replace(/\b\w|[-']\w/g, (match) => capitaliseString(match));
}
return capitaliseString(word.charAt(0)) + word.slice(1);
};
if (!allCaps) {
const capitalisedStr = str.split(' ').map(capitaliseWord).join(' ');
textInput.val(capitalisedStr);
} else {
textInput.val(capitaliseString(str));
}
});
}
/** Capitalises the entire string to uppercase.
* @param {string} str - The string to be capitalised.
* @returns {string} - The capitalised string. */
function capitaliseString(str) {
return str.toUpperCase();
}
Then add this code:
$(document).on('knack-view-render.any', function (event, {key: viewId}) {
for (const {selector, allCaps = false} of FIELDS_TO_CAPITALISE) {
capitaliseInput(viewId, selector, allCaps);
}
});
Let me know if you have any issues with this or would like any help.
Craig
1 Like
Thanks @CSWinnall - much appreciated. I’m sure many others in the community will find this of benefit too.
1 Like
Hi @CSWinnall. I’m trying to use this code to capitalise the first and last names in my system. My field names have spaces, so instead of “{selector: ‘#first’}“, can I do this {selector: ‘#first name’} and {selector: ‘#Last Name’}?
And should I paste all three code sections you show in the post into the JavaScript section under API & Code?
Hi @CharlB
Probably not. #first relates specifically to a Person field in Knack.
If you’re using a standard Short Text field for First Name, you’ll need to reference the field ID instead (e.g. #field_xyz).
You can find the field ID in the Builder. In the table view, it appears under the field name. If you can’t see it, there’s a toggle near the top of the fields list to show field IDs.
If the field type is a Person field, then #first will correctly map to the first name.
Yes, you’ll need to add all three snippets into your JavaScript. Just be aware that the fields referenced in the first snippet are examples — you can edit, remove, or add to them as needed. If you copy them exactly as-is, they’ll be applied to your app.
If you run into any issues, just shout.
Craig
Hi @CSWinnall
Thank you very much for the reply. I updated all fields to include the field IDs as you suggested and added all three pieces of code to my JavaScript.
I tested, and after entering text as lower case in the field, it changes it to capitalise the first character, but when I enter the field value as all caps, it stays all caps, and does not change to capitalise only the first character, e.g
First Name as “charl”, it’s changed to “Charl”
First Name as “CHARL”, it stays “CHARL”
Unsure if it’s my code, can you please advise?
Regards - Charl
Hi @CharlB
I believe you have found a limitation of the code. The code is looking for a lowercase 1st letter and converting it to uppercase. It is not considering the whole word. I can come up with an update in a week or so. Another option is copy the code to Chat Gpt and inform it of what it’s not doing and what it’s doing well. It should be able to update the code to suit. Otherwise I will fix this when I am back to work.
Sorry I can’t be more help at the moment.
Craig
Hi @CSWinnall
I gave it to Gemini, and it fixed the code as suggested. The code now includes selectors like “lower“, “upper“ and “title“ to determine what format you want the field value in. It works great! Thank you for the guidance.
Regards - Charl