JQuery вводимая маска, прописная / строчная
Я использую jquery inputmask
Как я могу использовать приведенный ниже код для любого вводимого текста без маски? любая введенная буква будет переводиться в верхний регистр.
Inputmask.extendAliases({
uppercase: {
mask: '' // any letters
definitions: {
'*': {
casing: "upper" //
}
}
});
JS
$('.uppercase').inputmask({casing:'upper'});
$('.lowercase').inputmask({casing:'lower'});
HTML
<input type="text" class="uppercase" />
<input type="text" class="lowercase" />
2 ответа
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
<input class="uppercase" />
<input class="lowercase" />
<input class="capitalize" />
Используйте CSS.
Вы можете использовать @guradio css и только прописные результаты при отправке формы на сервере или с помощью JavaScript перед отправкой.
Или просто прочитайте https://github.com/RobinHerbots/Inputmask там примеры, вы можете использовать regexp для ограничения только заглавными буквами.
Вы можете связать непосредственно на input
компонент с использованием JavaScript:
<input type="text" class="uppercase" onkeyup="this.value = this.value.toUpperCase();" />
<input type="text" class="lowercase" onkeyup="this.value = this.value.toLowerCase();" />
Если вы работаете с HTML5, вы можете использовать oninput
параметр:
<input type="text" class="uppercase" oninput="this.value = this.value.toUpperCase();" />
<input type="text" class="lowercase" oninput="this.value = this.value.toLowerCase();" />
Или... так как вы используете jQuery, это прекрасно работает, используя css
учебный класс:
<script>
$(document).on('input', '.uppercase', function(){
this.value = this.value.toUpperCase();
});
$(document).on('input', '.lowercase', function(){
this.value = this.value.toLowerCase();
});
</script>
То же самое, что и в ответе выше, однако изменение значений с использованием чистого jQuery:
<script>
$(document).on('input', '.uppercase', function(){
$(this).val($(this).val().toUpperCase());
});
$(document).on('input', '.lowercase', function(){
$(this).val($(this).val().toLowerCase());
});
</script>
Живой пример:
$(document).on('input', '.uppercase', function() {
$(this).val($(this).val().toUpperCase());
});
$(document).on('input', '.lowercase', function() {
$(this).val($(this).val().toLowerCase());
});
body {
display: grid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<label>UpperCase JS:</label>
<input type="text" onkeyup="this.value = this.value.toUpperCase();" />
<hr>
<label>LowerCase JS:</label>
<input type="text" onkeyup="this.value = this.value.toLowerCase();" />
<hr>
<label>UpperCase jQuery:</label>
<input type="text" class="uppercase" />
<hr>
<label>LowerCase jQuery:</label>
<input type="text" class="lowercase" />