Convert text field value to uppercase while typing using jQuery, JavaScript, and CSS

Today we’ll show you how to convert text field value to uppercase while typing using jQuery, JavaScript, and CSS. We may need to get the user’s data in uppercase such as promo code, banking website, etc. So with the help of the following methods, we can easily convert input field value while typing and the user does not need to turn on capsLock.

Different ways to convert text field value to uppercase

  1. Convert text to uppercase using jQuery
  2. Convert text to uppercase using JavScript
  3. Convert text to uppercase using CSS

1. Convert text to uppercase using jQuery

We will use jQuery toUpperCase() function to convert text value to uppercase and keyup() method that triggers the keyup event.

Check the following example.

2. Convert text to uppercase using JavScript

Here, we call uppercase() function by onkeyup event that converts text to uppercase using JavaScript.

Click here to convert all array values to LowerCase or UpperCase in JavaScript.

3. Convert text to uppercase using CSS

We can use text-transform property in CSS to convert text field value to uppercase as shown below code.

Note: Using the CSS, we can’t get the POST value in the Uppercase but it’s for display purposes only.

Output

Let’s take one of the examples and check the output in the browser.

Output - Convert text field value to uppercase while typing using jQuery, JavaScript, and CSS - Clue Mediator
Output – Convert text field value to uppercase while typing using jQuery, JavaScript, and CSS – Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *