Как сделать все в нижнем регистре автоматически в Javascript по мере их ввода в

Ответ 1

Я бы просто сделал CSS для этого, вместо того, чтобы обезопасить себя с помощью javascript:

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

Ответ 2

Два способа:

Использование CSS:

.lower {
   text-transform: lowercase;
}

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

Использование JS:

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

Ответ 3

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

Ответ 4

Нужно ли это отображать только в нижнем регистре или оно должно быть строчным? Если вы хотите отобразить строчные буквы, вы можете использовать CSS text-transform: lowercase.

В любом случае вам необходимо принудительно выполнить эту ограничение на стороне сервера, так как пользователь может отключить любой JS-код, который вы вставляете, чтобы он оставался в нижнем регистре.

Мое предложение: используйте CSS text-transform, чтобы он всегда отображался в нижнем регистре, а затем используйте toLower или его языковой вариант на серверной стороне, прежде чем использовать его.

Ответ 5

Это маска для типа проверки, который вы хотите

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

Преимущество использования этого заключается в том, что курсор не будет входить в конец ввода каждого введенного символа, как это было бы, если использовать решение keyup или keupress.

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

Это способ его использования.

Обс: Эта маска также отправляет данные в нижнем регистре на сервер.

Ответ 6

Текстовое преобразование Bootstrap:

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