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

Convert Input new tab

Here Ill perform you a easy and totally useful code to Convert Input pitch value to uppercase while typing using CSS, Jquery, Javascript, It is useful in the vent of you dependence addicts data in uppercase automatically as you have seen in banks website, They automatically convert typed data in uppercase, User no need to going re for capsLock. So that you can easily convert text squabble while user typing in 3 ways using CSS, Jquery and Javascript.

Here is the sample input sports ground. Suppose you have input filed of make known, I have accessory a class proclaim uppercase, Add this class make known almost which filed you ardent text in upper suit.

<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 pitch value to uppercase.

.uppercase { text-transform: uppercase; }

Converting text to uppercase using Jquery

In Jquery use toUpperCase() doing to convert text to uppercase, concerning jquery keyup method which triggers the users keyup warfare.

$(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() take effect by onkeyup business of the text ground, which motivate on the subject of all key press.

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

Leave a Reply