Forcing form text to be lower-case

Question

How could I force the text in the \"username\" text input to be lower-case regardless of what user types?

Answer 1

Combining a bit of everyone's answer to here simplify things.

1. Use CSS to avoid any flashing and for display purposes.

   input[type="username"] {
     text-transform: lowercase;
   }
   

Now, because this ONLY effects DISPLAY of the text in the browser, we need to also change the value of the input.

2. Add an event listener to the input.

   const usernameInput = document.querySelector('input[type="username"]');
   usernameInput.addEventListener("input", function(e){
     e.target.value = e.target.value.toLowerCase();
   });
   

We can send this to the sever like normal and, like others have mentioned, check server-side to make sure a malicious user didn't send us UpPPercaSe input.