Question

如何使用以下代码将任何输入文本与掩码一起使用？输入的任何字母都将强制为大写。

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

Answer 1

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

<input class="uppercase" />
<input class="lowercase" />
<input class="capitalize" />

使用css。

Answer 2

在提交之前，您可以在服务器端或使用JavaScript时使用@guradio css和表单提交上的大写结果。

或者只是阅读https://github.com/RobinHerbots/Inputmask示例，您可以使用regexp仅限制为大写字母。

Answer 3

您可以使用 JavaScript 直接在input组件上进行绑定：

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

Jquery输入掩码大小写/小写

3 个答案:

实时示例：

参考：