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.
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.
function uppercase() { var txt = document.getElementById("name"); txt.value = txt.value.toUpperCase(); } |