Máscara de moeda em input number

[Dênis Randon]

Alguém mais já passou por esse problema relatado neste bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=1003896

Preciso de um campo para inserir valores de moeda, com máscara, da seguinte
forma:
Padrão do campo seria 0.00, com o cursor sempre à direita, e sempre que
digitar o número vai crescendo para a direita.
O problema é que o firefox trunca o número, por exemplo: no campo tem o
valor 0.15, então se tentar colocar um zero, deveria ficar 1.50, mas ele é
truncado para 1.5.
No chrome funcionou perfeitamente.
Resolvi utilizando um input tipo text, mas o tipo number seria uma
conveniência, pois quando acessar pelo celular apareceria o teclado
numérico.

[Maurício Araldi]

Aqui nos meus testes eu consigo inserir 1.50.

Se usar o spinner para subir ou descer, ele vai truncar (i.e. Se estiver
1.49, com step 0.01, e subir uma vez, vai arredondar para 1.5. Mas se
digitar 1.50 direto, ele mantem o valor).

O Chrome tem esse exato mesmo comportamento.


Mauricio Araldi.
-

Em 5 de dezembro de 2014 09:04, Dênis Randon <denis...@gmail.com>
escreveu:

> _______________________________________________
> community-brasil mailing list
> communit...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/community-brasil
>

[Maurício Araldi]

Segue o fiddle de como fiz, veja se te ajuda

http://jsfiddle.net/wkgdc4ot/


Mauricio Araldi.
-

Em 5 de dezembro de 2014 10:26, Maurício Araldi <araldi....@gmail.com>
escreveu:

[Dênis Randon]

Eu fiz algo para não ter que digitar a vírgula, apenas ir digitando os
números.

Veja no fiddle como eu fiz e compara o funcionamento no chrome e no firefox.

http://jsfiddle.net/5zvd6qzm/3/

Em 5 de dezembro de 2014 10:30, Maurício Araldi <araldi....@gmail.com>
escreveu:

[Ricardo Panaggio]

On 12/05/2014 09:04 AM, Dênis Randon wrote:
> O problema é que o firefox trunca o número, por exemplo: no campo tem o
> valor 0.15, então se tentar colocar um zero, deveria ficar 1.50, mas ele é
> truncado para 1.5.

Isso é uma feature, não um bug[1]:

"If the user agent provides a user interface for selecting a number,
then the value must be set to the best representation of the number
representing the user's selection as a floating-point number."

Que aponta para:
<http://www.w3.org/TR/html5/infrastructure.html#best-representation-of-the-number-as-a-floating-point-number>

> No chrome funcionou perfeitamente.
> Resolvi utilizando um input tipo text, mas o tipo number seria uma
> conveniência, pois quando acessar pelo celular apareceria o teclado
> numérico.

Semanticamente falando, o correto seria utilizar number. Em especial por
causa disso:

"[...] a user agent might support numeric input in the user's local
format, converting it to the format required for submission as described
above. This might include handling grouping separators (as in
"872,000,000,000") and various decimal separators (such as "3,99" vs
"3.99") or using local digits (such as those in Arabic, Devanagari,
Persian, and Thai)."

O que já resolve tretas como exibir com ponto ou vírgula os decimais,
separadores de milhar, ...

As setas foram feitas para ajudar com ajustes finos (no seu caso, elas
estão aumentando a unidade, por causa do step="any"). Sugestão de
mudança: step="0.01" :)

Minha experiência com entradas alteradas durante a digitação é que o
usuário não espera o que quer que a gente ache ele espere. E ele espera
coisas que a gente não consegue prever. Algum usuário seu vai tentar
colocar ponto e não vai conseguir (eu tentei) ou alguma outra coisa que
você não previu.

O number foi criado justamente pra ajudar nesse tipo de coisa, e deveria
resolver. Recomendo pensar umas 10 vezes antes de realmente colocar uma
parada dessas, cheia de interrupções e caracteres aparecendo e sumindo,
em produção.

Para ter exatamente as features que você quer (manter duas casas
decimais, ...) sugiro usar text mesmo. Não é um número, é uma string com
formato específico, no que pattern[2] pode te ajudar.

[1]: http://www.w3.org/TR/html5/forms.html#number-state-%28type=number%29
[2]: http://www.w3.org/TR/html5/forms.html#attr-input-pattern

--
Ricardo Panaggio