Tenho um input
e quero que ele permita apenas letras maiúsculas em tempo real.
Esse código aparentemente funciona perfeitamente.
$("#texto").on("input", function(){
$(this).val($(this).val().toUpperCase());
});
Porém notei um bug e não sei resolvê-lo:
Quando tenho um texto por exemplo "RIO JANEIRO" e quero corrigi-lo para "RIO DE JANEIRO", quando digito qualquer letra no meio da palavra o cursor do input é resetado e vai para o último caractere e então o texto fica assim "RIO D JANEIROE". Reparem que a primeira letra fica no local correto e em seguida o cursor é movido pro final.
Como posso resolver isso?
$("#texto").on("input", function(){
$(this).val($(this).val().toUpperCase());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="texto">
uppercase
o cursor vai pra o final. Você poderia trocar o evento para ofocusout
, por exemplo. Sim, seria uma gambiarra :P