Input cursor going to end of line with jQuery and propertychange

Question

For example, I fill in the input of this fiddle with "Ste" and then go back to the beginning of the input to type "te" before "Ste", it goes to the end of the input when I type the first character "t". That is, whenever I type a character and the cursor is not at the end, the cursor goes to the end of the input after I type the character.

This is the script I’m using. I saw somewhere that setting this.selectionEnd would work but it didn’t work.

    $('body').on('input propertychange', '#form_cliente_id', function (e) {
        var position = this.selectionStart;
        e.preventDefault();
        $('#form_cliente_id').submit();
        this.selectionEnd = position;
    });

Any hint as to why this is happening and how to resolve?

Thank you!

Answer 1

I found that the problem was in the following excerpt:

oninput="this.value = this.value.toUpperCase()"

Removing this section and including this section, solved the problem:

style="text-transform: uppercase;"

Answer 2

You were putting the event handler on id wrong. Instead of #form_cliente_id, should be #nomecliente:

$(function () {
  $(document).on('change', '#nomecliente', function () {
    alert('Submitei o form com nome de cliente: "' + $(this).val() + '"');
    $(this).parents('form').submit();
  });
});

See the fiddle.