Convert Input field value to uppercase while typing using CSS, Jquery, Javascript

Here I’ll show you a simple and very useful code to convert input field value to uppercase while typing using CSS, Jquery, Javascript, It is useful when you need user’s data in uppercase automatically as you have seen in banks website, They automatically convert typed data in uppercase, User no need to on capsLock. So that you can easily convert text case while user typing in 3 ways using CSS, Jquery and Javascript.

Here is the sample input field. Suppose you have input filed of name, I have added a class name – uppercase, Add this class name on which filed you want text in upper case.

<input type="text" class="uppercase" name="name">

Converting text to uppercase using CSS

By the use of text-transform property in CSS to convert a input field value to uppercase.

.uppercase { text-transform: uppercase; }

Converting text to uppercase using Jquery

In Jquery use toUpperCase() function to convert text to uppercase, on jquery keyup method which triggers the user’s keyup action.

$(function() {   
 $('.uppercase').keyup(function(){
        $(this).val($(this).val().toUpperCase());
    });
});



Converting text to uppercase using Javascript

The uppercase() method converts text to uppercase in JavaScript. Simply call the uppercase() function by onkeyup event of the text field, which trigger on every key press.

<input type="text" id="name" onkeyup="uppercase()">
function uppercase() {
    var txt = document.getElementById("name");
    txt.value = txt.value.toUpperCase();
}



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.