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

This is my suggestion, it's based on the answer from @fdiv-bug & @ali-sheikhpour:

1. Add text-transform: lowercase; for this field.

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

2. catch "change" event on this field and transform value to lowercase by (String)toLowerCase function.

var upperCaseMatch = /[A-Z]/;
var events = {
    CHANGE: 'change'
};

$(function() {
    $(document).on('change', 'input[type="email"]', function() {
        var value = $(this).val();
        if (!upperCaseMatch.test(value)) {
            return;
        }
        $(this).val(value.toLowerCase());
    });
});

Hope its useful for you.