Skip to main content
OutSystems

How to transform input text into uppercase

Question

How to change the input text to uppercase as the user types?

Upper case is also known as capital letters.

Answer

This can be achieved via JavaScript or CSS, but it is harder to ensure that a JavaScript solution works in all target browsers.

For a CSS solution, add a style property with value "text-transform: uppercase" in your Input's Extended Properties.

unnamed (5).png

The user will see the text as uppercase letters, but the "real" text is not affected and will be submitted as typed. If you need the text in uppercase, use the built-in ToUpper() action in the server.

The example below ensures that the variable Session.Products_SearchKeyword is uppercase:

unnamed (6).png

If you're using the CSS code above in multiple inputs, it's easier if you create a style for it in your theme, and then apply it to the input fields, as shown below.

 

unnamed (7).png

  • Was this article helpful?