Bizarre code issue - extra characters appearing on input

Question

I have a bit of code on my website to turn users text input into all uppercase letters. I thought it was working fine until someone pointed out that on their mobile phone a strange glitch occurs. As the user types into the textbox, it inserts extra letters as the user types, so for example, if they are trying to type 'BOB' it changes to 'BOBOB' or if they type 'DAD' it becomes 'DADAD'.

I've replicated this issue on two different Android phones and on an Amazon Fire tablet. It doesn't happen on a desktop PC.

Edit: I can't just use CSS to change the text to uppercase as it reverts back to however the user typed it once the form (that the textbox is on) is submitted. I need the form to submit with the text actually converted to uppercase.

$('.surname input[type=text]').keyup(function() {
  var newVal = $(this).val().toUpperCase();
  console.log('newVal', newVal);
  $(this).val(newVal);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="surname">
  <input type="text">
</div>

Answer 1

Formatting text as it’s created while maintaining the right selection across browsers is notoriously difficult. I would do this by styling the text to look uppercase instead:

.surname input {
  text-transform: uppercase;
}

<div class="surname">
  <input type="text">
</div>

Whatever reads the text can then convert it to uppercase. Or, if you really need the value to change on the frontend, convert it to uppercase on blur.

Answer 2

This code convert the user's input to uppercase before submit.

STYLE:

input#surname {
   text-transform: uppercase;
}

/*add this to your css section or css file linked to the page*/

HTML:

<form name="reg-form" onsubmit="return processForm(event)" action="/cart/add" id="product_form_4118292955170" accept-charset="UTF-8" class="product-form--wide" enctype="multipart/form-data" method="post">
    <input type="hidden" name="form_type" value="product">
    <input type="hidden" name="utf8" value="✓">
    <!--add other input from the current or original form-->
    <div class="surname">
        <input required class="required" id="surname" type="text" name="properties[SURNAME]">
    </div>
    <!--put submit button here-->
</form>

JavaScript Code:

<script>
    function processForm(e) {
        var username_input = document.getElementById("surname");
        username_input.value = username_input.value.toUpperCase();

        return true;

        // You can submit the user's input here using Ajax, but
        // don't forget to remove action attribute in the form, 
        // set "e.pereventDefault()" and return false
    }
</script>