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?

Answer 1

Bootstrap Text transform:

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Answer 2

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

Answer 3

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 4

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 5

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.

Answer 6

This is a mask for the type of validation that you want

(function($) {
    $.fn.maskSimpleName = function() {
        $(this).css('text-transform', 'lowercase').bind('blur change', function(){
            this.value = this.value.toLowerCase();
        });
    }
})(jQuery);

The advantage of using it is that the cursor will not go to the end of the input each character entered, as it would if using the a keyup or keupress solution.

$('#myinput').maskSimpleName();

This is a way to use it.

Obs: This mask sends the data in lowercase to the server as well.