Ответ 1
Я бы просто сделал CSS для этого, вместо того, чтобы обезопасить себя с помощью javascript:
<input type="text" name="tobelowercase" style="text-transform: lowercase;">
Как сделать все символы текстового поля строчными буквами, когда пользователь вводит их в текстовое поле в Javascript?
<input type="text" name="thishastobelowercase">
Спасибо за любую помощь.
Я бы просто сделал CSS для этого, вместо того, чтобы обезопасить себя с помощью javascript:
<input type="text" name="tobelowercase" style="text-transform: lowercase;">
Два способа:
Использование CSS:
.lower {
text-transform: lowercase;
}
<input type="text" name="thishastobelowercase" class="lower">
Использование JS:
<input type="text" name="thishastobelowercase" onkeypress="this.value = this.value.toLowerCase();">
$('input').keyup(function(){
this.value = this.value.toLowerCase();
});
Нужно ли это отображать только в нижнем регистре или оно должно быть строчным? Если вы хотите отобразить строчные буквы, вы можете использовать CSS text-transform: lowercase
.
В любом случае вам необходимо принудительно выполнить эту ограничение на стороне сервера, так как пользователь может отключить любой JS-код, который вы вставляете, чтобы он оставался в нижнем регистре.
Мое предложение: используйте CSS text-transform
, чтобы он всегда отображался в нижнем регистре, а затем используйте toLower
или его языковой вариант на серверной стороне, прежде чем использовать его.
Это маска для типа проверки, который вы хотите
(function($) {
$.fn.maskSimpleName = function() {
$(this).css('text-transform', 'lowercase').bind('blur change', function(){
this.value = this.value.toLowerCase();
});
}
})(jQuery);
Преимущество использования этого заключается в том, что курсор не будет входить в конец ввода каждого введенного символа, как это было бы, если использовать решение keyup или keupress.
$('#myinput').maskSimpleName();
Это способ его использования.
Обс: Эта маска также отправляет данные в нижнем регистре на сервер.
Текстовое преобразование Bootstrap:
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>