Convert User Input to Uppercase or Lowercase Instantly While Typing with HTML, CSS, & JavaScript

0

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.


Force input field to convert user input to certain text case (uppercase or lowercase)


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 uppercase instantly on input.


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:


converting user input to lowercase instantly


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:

  1. How to conver the text to uppercase and lowercase on click using JavaScript.
  2. How to convert the text to title case using JavaScript.
  3. How to count the characters using JavaScript.
  4. How to write in two input fields at the same time using JavaScript.


Tags

Post a Comment

0Comments
Post a Comment (0)
To Top