How to make everything lowercase automatically in Javascript as they type it in

Question

How do I make all of the characters of a text box lowercase as the user types them into a text field in Javascript?

<input type="text" name="thishastobelowercase">

Thanks for any help.

Answer 1

I would just make CSS do this for you instead of monkeying around with javascript:

<input type="text" name="tobelowercase" style="text-transform: lowercase;">

Answer 2

Two ways:

Using CSS:

.lower {
   text-transform: lowercase;
}

<input type="text" name="thishastobelowercase" class="lower">

Using JS:

<input type="text" name="thishastobelowercase" onkeypress="this.value = this.value.toLowerCase();">

Answer 3

$('input').keyup(function(){
    this.value = this.value.toLowerCase();
});

Answer 4

Does it only have to display in lowercase, or does it have to be lowercase? If you want to display lowercase, you can use CSS text-transform: lowercase.

You need to enforce this constraint server-side anyway, because the user can disable any JS code you put in to enforce that it remains lowercase.

My suggestion: use the CSS text-transform to make it always display in lowercase, and then do a toLower or your language's variant of it on the server-side before you use it.