Master text case in your input fields! This blog post guides you on HTML, CSS, and JavaScript techniques to convert user input to uppercase or lowercase instantly. No more manual case changes! Perfect for forms, username, and more.
JavaScript Method Used:
- toUpperCase(): Convert string to uppercase.
- to LowerCase(): Convert string to lowercase.
JavaScript events Used:
- input event. (oninput).
Convert User Input to Uppercase or Lowercase Instantly on User Input.
Converting user input to uppercase.
It's easy to convert user input to uppercase on user input. Even if the user has its keyboard caps lock on or off. We are going to use the javascript toUpperCase() method for that.
Function to create user input to uppercase automatically.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change text automatic to uppercase and lowercase | maketechstuff.com</title>
</head>
<body>
<p>Automatic <b>Uppercase</b> input</p>
<input type="text" class="uppercase_input_field">
<br>
<br>
<p>Automatic <b>Lowercase</b> input</p>
<input type="text" class="lowercase_input_field">
</body>
</html>
JavaScript
let uppercase_input_field = document.querySelector(".uppercase_input_field");
uppercase_input_field.addEventListener("input", change_to_uppercase);
// Function to change text to uppercase.
function change_to_uppercase() {
uppercase_input_field.value = uppercase_input_field.value.toUpperCase();
}
Output:
Converting user input to lowercase.
For converting user input to lowercase while typing you can use toLowerCase() method of javascript on input event.
Functions to create user input to lowercase automatically.
JavaScript
let lowercase_input_field = document.querySelector(".lowercase_input_field");
lowercase_input_field.addEventListener("input", change_to_lowercase);
// Function to change text to lowercase.
function change_to_lowercase() {
lowercase_input_field.value = lowercase_input_field.value.toLowerCase();
}
Output:
So that's how you effortlessly change input field cases instantly on user input using the power of JavaScript. Now, users can type freely without worrying about manual adjustments, and your application handles the conversion automatically.
You may like:
- How to conver the text to uppercase and lowercase on click using JavaScript.
- How to convert the text to title case using JavaScript.
- How to count the characters using JavaScript.
- How to write in two input fields at the same time using JavaScript.
Share your thoughts.