2

Estou tentando implementar uma mascara de dinheiro usando um NumberFormat, porém está acontecendo um comportamento indesejado ao executar o script no Chrome para Android.

Sempre que é inserido um novo numero, o layout do teclado retorna para o default (alfabético), porém gostaria que ele permanece-se com o layout Numerico.

Segue o Script.

var real = document.getElementById("real");
var euro = document.getElementById("euro");
var dollar = document.getElementById("dollar");

var Mascara = function (elemento, localizacao, moeda, digitos) {    
  var self = this;    

  this.target = elemento;
  this.options = {}
  this.options.minimumIntegerDigits = 1;
  this.options.minimumFractionDigits = digitos;
  this.options.maximumFractionDigits = digitos;
  var defaultFormat = new Intl.NumberFormat(localizacao, this.options);

  this.options.style = "currency";
  this.options.currency = moeda;
  this.numberFormat = new Intl.NumberFormat(localizacao, this.options);
  this.base10 = Math.pow(10, digitos);

  var semSimbolo = defaultFormat.format(0);
  var comSimbolo = this.numberFormat.format(0);

  if (comSimbolo.indexOf(semSimbolo) == 0) {
    this.prefix = "";
    this.suffix = comSimbolo.replace(semSimbolo, "");
  } else {
    this.prefix = comSimbolo.replace(semSimbolo, "");
    this.suffix = "";
  }

  elemento.addEventListener("input", function (event) {
    Mascara.onInput(self);
  });
  elemento.addEventListener("focus", function (event) {
    Mascara.onInput(self);
  });
}

Mascara.nonNumericPattern = /[^0-9]/g;

Mascara.onInput = function (self) {   
  var oldLength = self.target.value.length;
  var oldRange = self.target.selectionEnd;
  var minRange = self.prefix.length + 1;
  if (oldRange < minRange)
    oldRange = minRange;

  var value = self.target.value.replace(Mascara.nonNumericPattern, "");
  var numero = value ? parseInt(value) / self.base10 : 0;

  self.target.value = self.numberFormat.format(numero);

  var maxRange = self.target.value.length - self.suffix.length;
  var newRange = oldRange + (self.target.value.length - oldLength);
  if (newRange > maxRange)
    newRange = maxRange;
  self.target.setSelectionRange(newRange, newRange);
}

new Mascara(real, "pt-BR", "BRL", 2);
new Mascara(euro, "pt-PT", "EUR", 2);
new Mascara(dollar, "en-US", "USD", 2);
<div>
  <label>
    Real:
    <input id="real" type="text" />
  </label>
</div>
<div>
  <label>
    Euro:
    <input id="euro" type="text" />
  </label>
</div>
<div>
  <label>
    Dollar:
    <input id="dollar" type="text" />
  </label>
</div>

Para testar o código acima em um dispositivo em um dispositivo Mobile, Faça o Logon no JSFiddle, então acesse o seguinte JSFiddle, execute o mesmo, então acesse o JSFiddle Draft

1 Resposta 1

0

Acabei por modificar o script para alterar o input:type para tel, desta forma o teclado que surgiu foi apenas o numerico e permitiu a inclusão de outras caracteres (coisa que o input[type='number'] não permite).

segue a versão atualizada do script:

var real = document.getElementById("real");
var euro = document.getElementById("euro");
var dollar = document.getElementById("dollar");

var Mascara = function (elemento, localizacao, moeda, digitos) {    
  var self = this;    

  this.target = elemento;
  var options = {}

  options.minimumIntegerDigits = 1;
  options.minimumFractionDigits = digitos;
  options.maximumFractionDigits = digitos;    
  var defaultFormat = new Intl.NumberFormat(localizacao, options);

  options.style = "currency";
  options.currency = moeda;    
  this.numberFormat = new Intl.NumberFormat(localizacao, options);
  this.base10 = Math.pow(10, digitos);

  var semSimbolo = defaultFormat.format(0);
  var comSimbolo = this.numberFormat.format(0);

  if (comSimbolo.indexOf(semSimbolo) == 0) {
    this.prefix = "";
    this.suffix = comSimbolo.replace(semSimbolo, "");
  } else {
    this.prefix = comSimbolo.replace(semSimbolo, "");
    this.suffix = "";
  }

  this.target.type = "tel";
  this.target.addEventListener("input", function (event) {
    Mascara.onInput(self);
  });
  this.target.addEventListener("focus", function (event) {
    Mascara.onInput(self);
  });
}

Mascara.nonNumericPattern = /[^0-9]/g;

Mascara.onInput = function (self) {   
  var oldLength = self.target.value.length;
  var oldRange = self.target.selectionEnd;

  var minRange = self.prefix.length + 1;
  if (oldRange < minRange)
    oldRange = minRange;

  var value = self.target.value.replace(Mascara.nonNumericPattern, "");
  var numero = value ? parseInt(value) / self.base10 : 0;

  self.target.value = self.numberFormat.format(numero);

  var maxRange = self.target.value.length - self.suffix.length;
  var newRange = oldRange + (self.target.value.length - oldLength);
  if (newRange > maxRange)
    newRange = maxRange;

  self.target.setSelectionRange(newRange, newRange);
}

new Mascara(real, "pt-BR", "BRL", 2);
new Mascara(euro, "pt-PT", "EUR", 2);
new Mascara(dollar, "en-US", "USD", 2);
<div>
    <label>
        Real:
        <input id="real" type="text" />
    </label>
</div>
<div>
    <label>
        Euro:
        <input id="euro" type="text" />
    </label>
</div>
<div>
    <label>
        Dollar:
        <input id="dollar" type="text" />
    </label>
</div>

com isto, acredito que tenho uma mascara para dinheiro que seja amigável com dispositivos mobile.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .