Doubt onkeyup javascript

Question

When I type in input any word, the typed text goes to uppercase.

In Mozilla Firefox and Internet Explorer I can turn back the indicator that keeps blinking to type a letter and I can edit it anywhere.

Already in Google Chrome, every time I turn the indicator, it automatically goes to the end of the typed text. How do I make it look like other browsers, where it is possible to go back and not go to the end of the text?

Nome: <input type="text" id="fnome" onkeyup="javascript:this.value=this.value.toUpperCase();">

Answer 1

Javascript-less

Try using CSS for this, instead of Javascript, so don’t rewrite the input value:

Nome: <input type="text" id="fnome" style="text-transform: uppercase;">

See example here.

With Javascript (jQuery)

If you do issue of Javascript or, for some reason, I would like to maintain the "effect" of transforming minuscule letters to uppercase and walk with the cursor by input without it returning to its final position, it is possible to do so:

HTML:

Nome: <input type="text" id="fnome">

JS:

$("#fnome").keyup(function(){
    
    var start = this.selectionStart,
        end = this.selectionEnd;
    
    $(this).val( $(this).val().toUpperCase() );
    this.setSelectionRange(start, end);
});

See example here.