Auto-capitalize text in Text Input

Queries and Resources
1

I want all text typed into a Text Input to be automatically capitalized. I tried using the Capitalize property and set it to Characters but it says it's only for "virtual keyboards". How do it do it for physical keyboards?

2

Hey @socaljoker,

I would use a JS query and bind it to the change event handler of the input.

Feels a bit strange doing this but works:

let input = textInput1.value

// Capitalizes every word
let capitalized = input.replace(/\b\w/g, function(l){ return l.toUpperCase() })

// Capitalizes first Character
let capitalized  = input.setValue(textInput1.value.charAt(0).toUpperCase() + input.value.slice(1))

textInput1.setValue(capitalized)
3

Hi @socaljoker ,

Try this it worked for me ,

textInput.value.charAt(0).toUpperCase() + textInput.value.slice(1);

I hope this helps :slight_smile:

4

@Ritesh & @minijohn unfortunately, neither of those seem to work for me. I don't currently have this requirement anymore, but it would be nice if they'd just add a checkbox option for it.

5

You might be able to use some custom CSS to do this :thinking: maybe try the following replacing textInput1 with the id of your text input?

#retool-widget-textInput1 input{
  text-transform: uppercase;
}

That won't capitalize the actual value meaning you would still need to transform it in any references:

But for that, _.upperCase might be helpful:

Similarly, text-transform: capitalize; and _.startCase will capitalize the first letter of each word.

6

This is an old post, but for the next person:

{{ _.startCase(item) }}

Just replace item with the value you want to have capitalized (just first letter).