Transform input value while user typing

[rispoli.mar2803]

Good morning to all guys. I would need that when a user is typing in a certain input, it is automatically capitalized. How could I do such a thing?

[joseph.farinhas]

Hey there. I believe what you are looking for can be done using the toolbox plugin and some custom HTML. Follow this tutorial: How to save input from html element using javascript to bubble - #3 by julienallard1

And in the HTML input field you can add the following onkeyup="this.value = this.value.toUpperCase();"after the input id (in example is id=yourname)

EDIT: source for HTML code there Forcing INPUT text to uppercase < HTML | The Art of Web

[julienallard1]

To set the first character of every word to upper case in an input put the following code in an HTML element:

<script>
document.addEventListener('keyup', e => {
element = e.target;
if (element.id != 'ID-HERE' || element.tagName != 'INPUT') return;
var words = element.value.split(' ');
element.value = words.map(w => w.slice(0,1).toUpperCase() + w.slice(1)).join(' ');
});
</script>

Set an id to the targeted input and replace ID-HERE in the above code with the id.

Result (typing all in lower case):

Since IDs can be attributed to only one element per HTML page, you can have only one input with auto-capitalization. If you want multiple you’d have to use classes instead of IDs.

UPDATE: Ignore my solution and pick luke2’s instead.

[luke2]

Nice one, good tip.

A more code free version approach could be:

1. Set the input element ID e.g. fullname
2. Add some CSS on the page or in a HTML element to transform the display of the text:
   <style>input#fullname {text-transform: uppercase !important;}</style>
3. Use Bubbles modifier on a text to transform e.g. inputs value: uppercase (or even capitalize)

Just thought I’d throw this out there.

[julienallard1]

This is by far a better solution than mine!
Way simpler and for sure more performant. I wasn’t aware of that text-transform also worked on inputs!
I tested is out and it worked without the !important statement…

[luke2]

Thanks, yes super handy and not something obvious in CSS for inputs. But good there are solutions out there. The JS method could definitely be useful when text strings need to be meet certain validation or formatting