How to convert text field value to Uppercase while typing
Using jQuery, JavaScript, and CSS, we’ll teach you how to transform text field values to uppercase when typing. We may need to acquire uppercase data from the user, such as a promo code or a banking website. We can quickly transform input field value while typing using the following methods, and the user does not need to use capsLock.
- JavaScript Convert 12 Hour AM/PM Time to 24 Hour Time Format
- How to truncate a string in JavaScript
- Generate a random number in given range using JavaScript
- Animated sticky header on scroll in JavaScript
- Convert text to uppercase using jQuery
- Convert text to uppercase using JavScript
- Convert text to uppercase using CSS
1. Convert text to uppercase using jQuery
We will use jQuery toUpperCase() function to convert text value to uppercase and keyup() method that triggers the keyup event.
Check the following example.
<html>
<head>
<title>Convert text field to uppercase while typing - Code Premix</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<h3>Convert text field to uppercase - Code Premix</h3>
<input type="text" id="changeVal" name="u_name">
</body>
<script>
$(document).ready(function () {
$('#changeVal').keyup(function () {
$(this).val($(this).val().toUpperCase());
});
});
</script>
</html>
2. Convert text to uppercase using JavScript
Here, we call uppercase() function by onkeyup event that converts text to uppercase using JavaScript.
Click here to convert all array values to LowerCase or UpperCase in JavaScript.
<html>
<head>
<title>Convert text field to uppercase while typing - Code Premix</title>
</head>
<body>
<h3>Convert text field to uppercase - Code Premix</h3>
<input type="text" name="u_name" onkeyup="uppercase(this)">
</body>
<script>
function uppercase(txt) {
txt.value = txt.value.toUpperCase();
}
</script>
</html>
3. Convert text to uppercase using CSS
We can use text-transform
property in CSS to convert text field value to uppercase as shown below code.
<html>
<head>
<title>Convert text field to uppercase while typing - Code Premix</title>
<style type="text/css">
#changeVal {
text-transform: uppercase;
}
</style>
</head>
<body>
<h3>Convert text field to uppercase - Code Premix</h3>
<input type="text" id="changeVal" name="u_name">
</body>
</html>
Note: Using the CSS, we can’t get the POST value in the Uppercase but it’s for display purposes only.
That’s it for today.
Thank you for reading. Happy Coding..!!