How to convert text field value to Uppercase while typing

  • Post category:JavaScript
  • Reading time:5 mins read

Using jQuery, JavaScript, and CSS, we’ll teach you how to transform text field values to uppercase when typing. We may need to acquire uppercase data from the user, such as a promo code or a banking website. We can quickly transform input field value while typing using the following methods, and the user does not need to use capsLock.

Checkout more articles on JavaScript

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.

<html>

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

<body>
  <h3>Convert text field to uppercase - Code Premix</h3>
  <input type="text" id="changeVal" name="u_name">
</body>
<script>
  $(document).ready(function () {
    $('#changeVal').keyup(function () {
      $(this).val($(this).val().toUpperCase());
    });
  });
</script>

</html>

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.

<html>

<head>
  <title>Convert text field to uppercase while typing - Code Premix</title>
</head>

<body>
  <h3>Convert text field to uppercase - Code Premix</h3>
  <input type="text" name="u_name" onkeyup="uppercase(this)">
</body>
<script>
  function uppercase(txt) {
    txt.value = txt.value.toUpperCase();
  }
</script>

</html>

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.

<html>

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

<body>
  <h3>Convert text field to uppercase - Code Premix</h3>
  <input type="text" id="changeVal" name="u_name">
</body>

</html>

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

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

Tags:

Leave a Reply