javascript – Problem converting input text to uppercase


I have an input and I want it to only allow capital letters in real time.

This code apparently works perfectly.

$("#texto").on("input", function(){

But I noticed a bug and I don't know how to solve it:

When I have a text for example "RIO JANEIRO" and I want to correct it to "RIO DE JANEIRO", when I type any letter in the middle of the word the input cursor is reset and goes to the last character and then the text looks like this "RIO D JANEIRO". Notice that the first letter is in the correct place and then the cursor is moved to the end.

How can I resolve this?

$("#texto").on("input", function(){

<script src=""></script>

<input type="text" id="texto">


Solutions with value.toUpperCase seem to have a problem that when typing in the field the cursor is reset, this workaround addresses this issue:

function handleInput(e) {
   var ss =;
   var se =; =; = ss; = se;
<input type="text" id="txtTest" oninput="handleInput(event)" />


An alternative is the solution with CSS :

It has a visual effect only, i.e. the change will not persist on POST .

#InputUpper {
<input type="text" name="InputUpper" id="InputUpper" value="teste" />
Scroll to Top