How to change Input characters to Upper Case while typing using CSS/jQuery ?

Given an input text area and the task is to transform the lowercase characters into uppercase characters while taking input from user. It can be done using CSS or JavaScript. The first approach uses CSS transform property and the second approach uses JavaScript to convert the lowercase character to upper case character.

Approach 1: This approach uses CSS text-transform property to transform the lowercase characters into uppercase characters while taking input from the user.

Example: This example implements the above approach.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
  
<head
    <title
        How to change Input character
        to Upper Case while typing
        using CSS/JavaScript ?
    </title>
</head
  
<body style = "text-align:center;">
      
    <h1 style = "color: green"
        GeeksForGeeks 
    </h1>
      
    <p id = "GFG_UP" style =
        "font-size: 20px; font-weight: bold;">
        Type in the input box in lower
        case to see the effect.
    </p>
      
    Type Here: <input id="yourid" 
        style="text-transform: uppercase"
        type="text" />
      
    <br><br>
      
    <p id = "GFG_DOWN" style = "color:green;
        font-size: 26px; font-weight: bold;">
    </p>
</body
  
</html>

chevron_right


Output:

  • Before typing in input box:
  • After typing lowercase letters in input box:

Approach 2:

  • Use keyup() method to trigger the keyup event when user releases the key from keyboard.
  • Use toLocaleUpperCase() method to transform the input to uppercase and again set it to the input element.

Example: This example implements the above approach.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
  
<head
    <title
        How to change Input character
        to Upper Case while typing
        using CSS/JavaScript ?
    </title>
      
    <script src=
    </script>
</head>
  
<body style = "text-align:center;"
      
    <h1 style = "color: green"
        GeeksForGeeks 
    </h1>
      
    <p id = "GFG_UP" style
        "font-size: 20px; font-weight: bold;">
        Type in the input box in lower
        case to see the effect.
    </p>
      
    Type Here: <input id="yourid" type="text" />
      
    <br><br>
      
    <script>
        $(function() {
            $('input').keyup(function() {
                this.value = this.value.toLocaleUpperCase();
            });
        });
    </script
</body
  
</html>

chevron_right


Output:

  • Before typing in input box:
  • After typing lowercase letters in input box:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.