calculator does not work properly on mobile devices

I’ve been trying to solve this for hours and I can’t.

The problem is when you try to erase the numbers entered.

You have to first select the two fields and enter the dollar amount in the third field. Then enter a value in the first field.

On the computer it works normally, but on some cell phones it is not working properly.

On some iphone using safary in the latest version it works. Already on some android devices with Google no. I didn’t check the browser version, but I tried it on newer and older phones. Some new ones give a problem and some don’t, as well as old ones.

This code was not developed by me, it is a little old and uses a template language called Freemarker. Don’t care too much about this language, it’s used to get data from the form and insert it into the html code.

There’s a link for you to access and test. This page contains two calculators, it is the first one that is giving problems. I’ll post a print of it.

URL: https://www.smiles.com.br/p123kby0ocxqaelzcgszc9x6hsmwt59wbrftzbr5ovtgngq7cy
Print:

Code:

<#assign
moduloSimulador = simulador_cobranded_separator
itemSimulador = moduloSimulador.getChild("item_simulador_separator").getSiblings()
>

<#list itemSimulador as cur_item>
<#assign
imagemItem = cur_item.getChild("imagem_item").getData()
textoImportanteItem = cur_item.getChild("texto_importante_item").getData()
>
 <div data-simulador-mod021 class="canta-mod021-simulador">
  <div>
      <div>
      <#if imagemItem?has_content>
        <img src="${imagemItem}" alt="Imagem Simulador" />
      </#if>
          
      </div>
      <div>
          <div class="content-input">
              <label for="lblSeg">Assinante Clube Smiles</label>
              <select data-mod021-assinante id="lblSeg">
                  <option value="">Escolha</option>
                  <option value="sim">Sim</option>
                  <option value="nao">Não</option>
              </select>
          </div>
      </div>
      <div>
          <div class="content-input">
              <label for="lblCart">Tipo de Cartão</label>
              <select data-mod021-cartao id="lblCart">
                  <option value="">Escolha</option>
                  <option value="infinite">Infinite</option>
                  <option value="platinum">Platinum</option>
                  <option value="gold">Gold</option>
                  <option value="inter">Inter</option>
              </select>
          </div>
      </div>
      <div class="break-sm"></div>
      <div>
          <div class="content-input rs">
              <label for="lblValorGasto">Valor gasto no cartão</label>
              <input value="0" min="1" maxlength="12" data-mod021-valor class="style2" type="text" id="lblValorGasto" placeholder="0" />
          </div>
      </div>
      <div>
          <div class="content-input">
              <label for="lblConversor">Conversor</label>
              <input data-mod021-conversor readonly class="style2" type="text" id="lblConversor" placeholder="0" />
          </div>
      </div>
      <div>
          <div class="content-input rs">
              <label for="lblDolar">Cotação do Dólar</label>
              <input value="0" min="1" maxlength="5" data-mod021-cotacao class="style2" type="text" id="lblDolar" placeholder="0" />
          </div>
      </div>
      <div class="sep">=</div>
      <div>
          <div class="content-input">
              <label for="lblAcumulo">Acúmulo</label>
              <input data-mod021-acumulo readonly class="style2" type="text" id="lblAcumulo" placeholder="0" />
          </div>
      </div>
  </div>
  <p class="p-jur">
      ${textoImportanteItem}
  </p>
</div>
</#list>


<script>
(function(window) {
  "use strict";

  let $items = document.querySelectorAll("[data-simulador-mod021]");
  if ($items.length > 0) {
    for (let a = 0; a < $items.length; a++) {
      engine($items[a]);
    }
  }

  function isValidKey(key) {
    if (
      (key >= 49 && key <= 57) ||
      (key >= 97 && key <= 105) ||
      key == 8 ||
      ((key == 48 || key == 96) &&
        milesInput.value !== '' &&
        milesInput.value !== '0')
    ) {
      return true;
    }
  }

  //mascara de valor
  function mascaraValor(valor) {
    valor = valor.toString().replace(/D/g, "");
    valor = valor.toString().replace(/(d)(d{9})$/, "$1.$2");
    valor = valor.toString().replace(/(d)(d{6})$/, "$1.$2");
    valor = valor.toString().replace(/(d)(d{3})$/, "$1.$2");
    return valor;
  }

  function getValorMoneyBr(valor) {
    let value = valor
      .toFixed(2)
      .toString()
      .split(".");
    let formatFirstPart = mascaraValor(value[0]);
    let formatSecondPart = "," + value[1];

    let formatedValue = formatFirstPart + formatSecondPart;
    return formatedValue.toString();
  }

  //mascara de mordas
  function moeda(v) {
    v = v.toString().replace(/D/g, ""); //permite digitar apenas números
    v = v.toString().replace(/[0-9]{12}/, "inválido"); //limita pra máximo 999.999.999,99
    //v = v.toString().replace(/(d{1})(d{8})$/, "$1.$2"); //coloca ponto antes dos últimos 8 digitos
    //v = v.toString().replace(/(d{1})(d{1,2})$/, "$1.$2"); //coloca ponto antes dos últimos 5 digitos
    v = v.toString().replace(/(d{1})(d{1,2})$/g, "$1,$2"); //coloca virgula antes dos últimos 2 digitos
    return v.toString();
  }

  //define o valor do conversor
  function changeConversor(c, a) {
    let valueConversor = "";
    let cartao = c.value;
    let assinante = a.value;

    if (cartao && assinante) {
      if (cartao === "infinite") {
        if (assinante === "sim") {
          valueConversor = 4;
        } else {
          valueConversor = 2.2;
        }
      } else if (cartao === "platinum") {
        if (assinante === "sim") {
          valueConversor = 3;
        } else {
          valueConversor = 2;
        }
      } else if (cartao === "gold") {
        if (assinante === "sim") {
          valueConversor = 2.5;
        } else {
          valueConversor = 1.5;
        }
      } else {
        if (assinante === "sim") {
          valueConversor = 2;
        } else {
          valueConversor = 1.35;
        }
      }

      return valueConversor;
    } else return "";
  }

  function engine(item) {
    let assinante = item.querySelector("[data-mod021-assinante]");
    let cartao = item.querySelector("[data-mod021-cartao]");
    let valor = item.querySelector("[data-mod021-valor]");
    let conversor = item.querySelector("[data-mod021-conversor]");
    let cotacao = item.querySelector("[data-mod021-cotacao]");
    let acumulo = item.querySelector("[data-mod021-acumulo]");
    let conversorValor = "";

    function calc() {
      let nValor = valor.value.toString().replace(/(D)/g, "");

      let nCotacao = moeda(cotacao.value);

      nCotacao = nCotacao.replace(",", ".");

      nCotacao = parseFloat(nCotacao);

      let nConversor = parseFloat(conversor.value.toString().replace(",", "."));

      if (nValor <= 0 || nCotacao <= 0) {
        valor.value = "";
        cotacao.value = "";
        acumulo.value = "";
      } else {
        let v = (nValor / nCotacao) * nConversor;
        // acumulo.value = getValorMoneyBr(v);
        acumulo.value = Math.round(v);
      }
    }

    valor.addEventListener("keyup", function(event) {
      if(!event.keyCode) return;

      let v = this.value;
      valor.value = mascaraValor(v);

      if (valor.value && conversor.value && cotacao.value) {
        calc();
      }
    });

    cotacao.addEventListener("keyup", function() {
      if(!(event.keyCode)) return;

      if (valor.value && conversor.value && cotacao.value) {
        calc();
      }
    });

    cotacao.addEventListener("keyup", function() {
      if(!event.keyCode) return;

      let v = this.value;
      cotacao.value = moeda(v);
    });

    //define valor conversor
    if (assinante && cartao) {
      cartao.addEventListener("change", function() {
        conversorValor = changeConversor(cartao, assinante);
        conversor.value = conversorValor.toString().replace(".", ",");

        valor.value = "";
        cotacao.value = "";
        acumulo.value = "";
      });

      assinante.addEventListener("change", function() {
        conversorValor = changeConversor(cartao, assinante);
        conversor.value = conversorValor.toString().replace(".", ",");

        valor.value = "";
        cotacao.value = "";
        acumulo.value = "";
      });
    }
  }
})(window);
</script>