Jquery inputmask casing uppercase/lowercase

Question

Im using jquery inputmask

How can I use below code to any input text with out a mask? any letter inputted will force to uppercase.

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

You can bind directly on input component using JavaScript:

<input type="text" class="uppercase" onkeyup="this.value = this.value.toUpperCase();" />
<input type="text" class="lowercase" onkeyup="this.value = this.value.toLowerCase();" />

If you're working with HTML5 you can use oninput parameter:

<input type="text" class="uppercase" oninput="this.value = this.value.toUpperCase();" />
<input type="text" class="lowercase" oninput="this.value = this.value.toLowerCase();" />

---

Or... as you're using jQuery, this works perfectly using css class:

<script>
    $(document).on('input', '.uppercase', function(){
       this.value = this.value.toUpperCase();
    });

    $(document).on('input', '.lowercase', function(){
       this.value = this.value.toLowerCase();
    });
</script>

Same thing as answer above, however changing values using pure jQuery:

<script>
    $(document).on('input', '.uppercase', function(){
       $(this).val($(this).val().toUpperCase());
    });

    $(document).on('input', '.lowercase', function(){
       $(this).val($(this).val().toLowerCase());
    });
</script>

---

Live example:

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

---

Reference:

• Get the value in an input text box
• html <input type="text" /> onchange event not working
• https://www.w3schools.com/jsref/jsref_tolowercase.asp
• https://www.w3schools.com/jsref/jsref_touppercase.asp
• https://www.w3schools.com/jquery/html_val.asp

Answer 2

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

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

Use css.

Answer 3

You can use @guradio css and just uppercase results on form submit on serverside or with JavaScript before submit.

Or just read https://github.com/RobinHerbots/Inputmask there examples, you can use regexp to limit only to uppercase letters.