How to Convert Text Field Value to Uppercase While Typing

Sometimes we need to make the text field force uppercase so that the user can add only the uppercase letters in it. Using jQuery you can automatically convert text field value while typing. Not only the jQuery, here we will show you the three different way to transform text field data to uppercase while typing.

Convert to Uppercase using jQuery

jQuery keyup() method triggers the keyup event and the toUpperCase() function converts text to uppercase.

$(document).ready(function(){
    $('#id').keyup(function(){
        $(this).val($(this).val().toUpperCase());
    });
});

Convert to Uppercase using JavaScript

The uppercase() method converts text to uppercase using JavaScript. Call the uppercase() function by onkeyup event of the text field.

function uppercase(obj){
    obj.value = obj.value.toUpperCase();
}

Convert to Uppercase using CSS

Use text-transform property in CSS to transform a text field to uppercase.

#id{text-transform: uppercase;}