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" />


Ссылка:

Другие вопросы по тегам