perform toUpperCase() each time the content of an input field is changed

Question

I want to perform toUpperCase() each time the content of an input field is changed. I mean not when the field lost focus, but each time a character is typed.

I try this which doesn't work (I'm fairly new to JQ)!

$(".myClass").change(function () {
        $(this).val().toUpperCase();
});

Besides the function is launched only on blur.

What's wrong?

Answer 1

$('.myClass').on('input', function() {
     $(this).val($(this).val().toUpperCase());
});

Answer 2

You should use another keyboard event:

https://api.jquery.com/keypress/

$( "#test" ).keypress(function(e) {
    $(this).val($(this).val().toUpperCase());
});

Answer 3

Function will fire change event but You need to reset that value using .val() as just setting the text to toUpperCase() isn't enough.

$(".myClass").change(function () {
        $(this).val($(this).val().toUpperCase());
});

Fiddle Demo

Answer 4

To limit the characters in the browser input to upper case, use css-

someinput{text-transform:uppercase}

Then use any change event or a validation before submitting to change the value you are sending to the server.