JQuery E JQuery Price Para Formatar Seus Campos De Valor Monetário

Salve pessoal.

Muita gente me manda emails ou mensagens no twitter achando que eu escrevi o Plugin JQuery Price para JQuery, que ajuda você a formatar seus campos de texto com valores monetários, valores de preço. Se você ler bem certinho na página oficial do Plugin (http://meiaduzia.com.br/cuducos2/priceformat), e também no código ao baixar ele, verá que eu apenas colaborei com uma nova função do plugin, uma necessidade minha no início do ano de 2009.

O Autor do Plugin é o Eduardo Cuducos, Um tremendo Designer e Desenvolvedor Web do estado de Santa Catarina que conheci por meio desse Plugin. Aqui você pode conhecer mais dele ou seguir seu twitter (http://twitter.com/cuducos) para pegar suas idéias, sejam de designer, política ou pensamentos de vida, que também valem a pena.

Para usar o Plugin é fácil.
Na página oficial consta alguns exemplos bem explicativos.
Mas se você ainda tem dúvidas vou reproduzí-los aqui.

Primeiro crie seu Html com o campo que quer formatar.
Não preciso dizer para você carregar a JQuery e o Plugin JQuery Price preciso ?

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jprice.js"></script>
<script type="text/javascript">
    
    function init()
    {
        
    }

    $(document).ready(init);
    
</script>

</head>
<body>

    <h1>Exemplo</h1>

    <label for="price">Valor:</label>
    <input type="text" id="price" />

</body>

Ok.
Reparem que eu já acrescentei um código JavaScript para chamar a funcão init assim que a página terminar de carregar. Isso evita que o JavaScript tente fazer algo com algum campo do Html que não esteja criado ainda. Uma outra solução para isso poderia ser colocar esse código ao final do Html.

Para o uso básico do Plugin, basta fazer a chamada do campo (no meu caso chamei pelo id) e acrescentar o método priceFormat veja:

function init()
{
    $('#price').priceFormat();
}

$(document).ready(init);

Com isso seu input já formata automaticamente os números inseridos nele para as configurações padrões do Jquery Price. Ah sim, ele impede que você digite letras e alfanuméricos nesse campo também.

Ficou legal não?
Mas você não quer esse valor em doláres, você está lidando com o seu Brasil Brasileiro.
Vamos personalizar isso então.

function init()
{
    $('#price').priceFormat({
        prefix: 'R$ ',
        centsSeparator: ',',
        thousandsSeparator: '.'
    });
}

Passando parâmetros para funcão em formato de array, conseguimos personalizar nosso input conhecendo algumas propiedades do plugin.

Com a propiedade prefix, alteramos o que vem antes dos números.
Repare que foi dado um espaço após o cifrão para ficar melhor visivelmente dentro do input.
Em seguida foi modificado o separador de centavos para uma vírgula e o separador de milhar para um ponto.

Muito fácil não ??

E chegamos ao momento mais esperado (Ou não).
Qual foi a minha colaboração com o Plugin ? Qual foi meu problema ?

Eu precisava limitar o valor que o usuário digitava.
Se você testar os exemplos que fizemos até aqui, verá que você pode inserir números até cansar.

Na época fiz um código meio xulo para resolver o problema, porque estava começando com JQuery e não tinha muita desenvoltura para alterar seus plugins. Mandei o código para o Cuducos que fez as devidas adaptações, não estragando a facilidade de uso do plugin.
Vamos a um exemplo:

function init()
{
    $('#price').priceFormat({
        prefix: 'R$ ',
        centsSeparator: ',',
        thousandsSeparator: '.',
        limit: 6
    });
}

Passando mais uma propiedade para o método, chamada limit, agora você só pode inserir 6 numerais dentro do seu input.

Um outro limitador que temos é o de casas para os centavos.

function init()
{
    $('#price').priceFormat({
        prefix: 'R$ ',
        centsSeparator: ',',
        thousandsSeparator: '.',
        limit: 6,
        centsLimit: 4
    });
}

Difícil ? Acredito que não certo ?
Experimente outros valores e confira os resultados.

Por hoje é isso pessoal.
Demos uma passada por todo o uso do plugin JQuery Price além de conhecer a história de como colaborei para o plugin. Espero ter tirado as dúvidas do pessoal que me manda emails e afins.

Agradecimentos imensos para o Eduardo Cuducos que adicionou meu nome dentro do projeto do plugin pela minha pequena colaboração, tornando o meu nome mais visível para a comunidade de desenvolvimento.

Qualquer coisa é só entrar em contato.
Abraços!


Comments