Sempre precisei em meus projetos mascarar a entrada de dados em campos onde eram informados valores decimais, já procurei muito pela net e não encontrei nada que resolvesse meu problema, então a necessidade fez com que eu tirasse um tempo para desenvolver minha própria solução, e nasceu o DecimalInput, um componente derivado do TextInput que formata automaticamente os valores no momento em que são digitados.
Para ver um exemplo do componente clique aqui.
Para baixar o componente clique aqui.
Peço que se encontrarem algum bug, por favor me reportem para que eu faça a correção e disponibilize uma nova versão corrigida.
Como não tive tempo para comentar o código no padrão asDoc não estou disponibilizando a documentação do componente, mas a descrição das propriedades e métodos abaixo já ajuda.
Propriedades
currencyFormat : String (br | us)
Determina o formato da máscara de entrada
Padrão : us
precision : int
Determina a quantidade de casas decimais
Padrão : 2
useThousandsSeparator : Boolean (true | false)
Determina se os separadores de milhar devem aparecer na máscara
Padrão : true
Métodos
decimalText : String
Retorna o valor em formato decimal sem os separadores de milhar
Ex.: 1.234.456,78 retorna 132456,78
unformatedText : String
Retorna o valor sem formato
Ex.: 1.234.456,78 retorna 13245678
37 comentários:
Bacana cara, porém, quando se digita uma letra, realmente tem que apagar o conteúdo já digitado !?
[]'s
Realmente estava apagando o conteúdo digitado, acabei de colocar no ar uma versão com essa correção
Conforme solicitado @ [flexdev]: "Olá" :-)
Sucesso com o Blog!
Elvis Fernandes
componente super interessante! valeu!
Fernando,
Seu componente caiu como uma luva. Parabéns.
Eu usei a versão 0.5 desse DecimalInput e está funcionando blza ehehhehe .. sucesso com o blog..
Mario
É Mario esse componente nasceu por culpa sua, se não fosse você ficar enchendo o saco não teria feito.
Blz Fernando otima iniciativa sucesso.
Jairo Costa
Nossa, ótimo artigo, me ajudou muito e economizou tempo também, sucessos !
oi
Vlw, me economizou um bom tempo, obrigado
Ótimo componente porém tem uma coisa. Você concorda que o curso deveria ficar sempre onde o cara clicar.
Ex:
eu cliquei no componente, na página de exemplo que você liberou e digitei 22 no campo, ai ficou assim, 0,22 . Bom, dai eu cliquei na frente do 0 (ZERO) e apertei duas vezes a tecla 4, ai ficou 402,24, sendo que o certo seria 440,22 , mas depois de digitar o primeiro 4, o cursor vai para o final do valor, acho que deveria manter o cursor não?
como usar este componente ja importei ele no flexbuilder..e agora?
obrigado.
Marcio
Ficou muito bom, parabéns, ja to usando.
Eguinaldo
Tem como eu acessar seu componente pelo ID? Pq eu to usando ele no itemRenderer de um DataGridColumn e precisaria acessá-lo pelo ID. Mas ele não permite definir um ID. Grato!!!
Exatamento tudo que for possível fazer com um TextInput é possível fazer com este componente, ele é herdado do TextInput e nenhuma funcionalidade foi restringida.
Abraço.
Fernando Incerti
Hi Fernando,
thanks for your component!
Is it possible to change the decimalSeparator and the thousandsSeparator with other characters? In example, I want to use the "." for the thousandsSeparator too.
Ciao,
Andrea
Muito bom seu componente.
Porém gostaria de saber como utilizar números negativos?
vlw.
Rodrigo
Olá, gostei do componente. Você pretende disponibilizar o código-fonte também, ou apenas o swc?
Muito bom esse componente
abraço
Bom dia!
Uma coisa que ninguem perguntou e nem tem exemplo nem nada.
Caomo realizar cálculos?? Ele nao tem propriedade value, apenas text, quando quero multiplicar valores, nao achei como.
Abraços.
Fernando,
Esse component está para Flex 3, você não teria ele numa versão para Flex 2?
Se você não tiver, você poderia se possível e sem querer abusar compartilhar o codigo fonte.
Cara, muito bom isso, agora estou com um probleminha, não sei se por falta de atenção minha ou por que não é possível, quando os valores vem do banco ele não coloca a máscara, é preciso digitar um numero pra a máscara aparecer...
Fernando, show de bola esse seu componente, ainda nao usei, mas se funcionar como no exemplo que vc disponibilizou, ja me quebra uma arvore inteira.
Vlw, meus parabens!
Cara, como importa esse componente pro meu projeto?
Absss
Alguem conseguiu importar o componente?
Nao estou conseguindo!
Por favor se alguem puder ajudar ( rafaelrovidesp1@yahoo.com.br )
Ate mais
Belo componente, no entanto quando os dados vem do banco ?? tem algum método que formata os dados sem necessáriamente ter "teclado" na ação ??
grande abraço e mais uma vez parabéns !!
Oi Fernando,
Eu baixei o ZIP, mas parece que está incompleto. Como faço para utilizar este componente?
Falta o .as
top! Uma bela contribuição!
Uma sugestão, colocar uma opção no método de mostrar os valores decimais sem os milhares para o indivíduo escolher se ele quer que venha com "." ou ",", com uma variável boolean você faz isso em 30 seg. É muito útil pra setar valores float etc.
Abraço, obrigado.
Como faço para usar esse componente?
Como faço para usar esse componente?
Necesitaría ingresar negativos... es posible?
Cara Parabéns pelo teu componente, eu tava precisando de um componente assim a algum tempo, parabéns.
Parabéns pelo componente!
Teria como começar com o cursor na esquerda, colocando as casas decimais somente depois que digitar a vírgula?
Até hj ajudando as pessoas.
Bom dia, teria como disponibilizar o fonte do componente?
Postar um comentário