Correct desktop input toUpperCase on mobile with duplicate error

Question

The script below turns all characters uppercase into an input.

<input type='text' name='meuInput'>

<script>
  $("input").bind('keyup', function (e) {
    if (e.which >= 97 && e.which <= 122) {
      var newKey = e.which - 32;
      e.keyCode = newKey;
      e.charCode = newKey;
    }
    $(this).val(($(this).val()).toUpperCase());
});
</script>

The desktop works normally, but in mobile it duplicates the text. But in mobile when:

Digit: E

Sai: EE

Digit: And it is

Sai: And he is

Digit: And it’s the

Sai is ae is ae

Is there another way or how to fix it?

Answer 1

In fact your code transforms the characters of only one input, but of all. And you don’t need a javascript for this, just text-tranform css.

Here is an example where all inputs of type text will have their contents in uppercase letters.

input[type='text']{
  text-transform: uppercase;
}

<input type='text' name='meuInput'>