Странный код проблемы - дополнительные символы появляются на вводе

Question

У меня есть немного кода на моем веб-сайте, чтобы превратить ввод текста пользователем во все прописные буквы.Я думал, что это работает нормально, пока кто-то не указал, что на их мобильном телефоне происходит странный сбой.Когда пользователь вводит текстовое поле, он вставляет дополнительные буквы в качестве пользовательских, например, если он пытается набрать «BOB», он меняется на «BOBOB» или если он вводит «DAD», он становится «DADAD».

Я повторил эту проблему на двух разных телефонах Android и на планшете Amazon Fire.Это не происходит на настольном ПК.

Редактировать: я не могу просто использовать CSS, чтобы изменить текст в верхний регистр, так как он возвращается обратно, однако пользователь набрал его один раз в форме (что текстовое поле включено) представлен.Мне нужна форма для отправки с текстом, фактически преобразованным в верхний регистр.

$('.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

Форматирование текста в том виде, в котором оно создано, с сохранением правильного выбора в разных браузерах, как известно, затруднительно.Я бы сделал это, стилизовав текст так, чтобы он выглядел заглавными:

.surname input {
  text-transform: uppercase;
}

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

Все, что читает текст, может преобразовать его в верхний регистр.Или, если вам действительно нужно изменить значение во внешнем интерфейсе, преобразуйте его в верхний регистр в blur.

Answer 2

Этот код преобразует вводимые пользователем символы в верхний регистр перед отправкой.

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:

<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>