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.

  <title>Convert text field to uppercase while typing - Clue Mediator</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>



  <h3>Convert text field to uppercase - Clue Mediator</h3>
  <input type="text" id="changeVal" name="u_name">

<script>
  $(document).ready(function () {
    $('#changeVal').keyup(function () {
      $(this).val($(this).val().toUpperCase());
    });
  });
</script>

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.

  <title>Convert text field to uppercase while typing - Clue Mediator</title>



  <h3>Convert text field to uppercase - Clue Mediator</h3>
  <input type="text" name="u_name" onkeyup="uppercase(this)">

<script>
  function uppercase(txt) {
    txt.value = txt.value.toUpperCase();
  }
</script>

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.

  <title>Convert text field to uppercase while typing - Clue Mediator</title>
  <style type="text/css">
    #changeVal {
      text-transform: uppercase;
    }
  </style>



  <h3>Convert text field to uppercase - Clue Mediator</h3>
  <input type="text" id="changeVal" name="u_name">

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

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