How To Change All Input Values Into Uppercase Using jQuery

In this post, we will learn about how to uppercase all characters of the input box and retrieve all text as uppercase using jQuery. Here is an example for this demo, first we need to add one input box and create a jQuery keyup event for input box than we have to use the toUpperCase function for convert input box value from lower case to upper case than assign this converted text into the input box. Let's start coding.

Description: In this post, we will learn about how to uppercase all the characters of the input box and retrieve all text as uppercase using jQuery. For this demo, first we need to add one input box and create a jQuery keyup event for the input box than we have to use the toUpperCase function for converting input box value from lower case to upper case, than assign this converted text into the input box. Let's start coding.

First, we need to add the below js for accessing the jQuery functions

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

HTML Code

<div>
    <asp:TextBox runat="server" ID="txt1" CssClass="upperClass" />
    <button id="btn" onclick="GetData()">Get</button>
    <asp:Button runat="server" ID="bvtmn" Text="get" OnClick="bvtmn_Click" Visible="false" />
</div>

Javascript Code

<script>
    $(document).ready(function () {
        $("input[type=text]").keyup(function () {
            $(this).val($(this).val().toUpperCase());
        });
    });

    function GetData() {
        alert($("#txt1").val());
    }
</script>

Description of the above code: First we type text in the textbox and this textbox keyup event makes all characters uppercase assigns them to the textbox. After that we click on Button, which displays an alert with uppercase letter text.

See the below output,