Recentemente fiz um post neste blog ensinando como aplicar máscaras em campos com jQuery. Na maioria das situações o plugin apresentado resolve o problema com perfeição, mas em casos como a formatação de valores monetários precisam ser tratados de forma específica.
O jQuery Price Format é um plugin que atende esse caso e é bastante simples de usar e altamente customizável. Vamos para os exemplos:
Para utilizá-lo faça a referência dos arquivos necessários na tag head da sua página html. Neste caso só precisamos do jQuery e do próprio jQuery Price Format.
<head>
<title> título do site </title>
...
<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.price_format.1.5.js"/></script>
</head>
Para utilizar o plugin basta usar o seletor do jQuery para “selecionar” os inputs que você deseja aplicar a máscara e chamar a função priceFormat(). A função priceFormat() recebe como parâmetro um JSON onde é possível passar algumas propriedades que permitem customizar a máscara de formatação.
$('input.money').priceFormat({ centsSeparator: ',', thousandsSeparator: '.' });
No exemplo acima, eu estou selecionando todos os input que possuem a class money e aplico a máscara definindo que o separador de centavos (centsSeparator) será com vírgula e separador de milhar (thousandsSeparator) será com ponto.
Abaixo confira outras maneiras de utilizar o plugin:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Máscara com jQuery em valores montários</title>
<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.price_format.1.5.js"/></script>
<script type="text/javascript">
jQuery(function () {
$('#exemplo1').priceFormat();
$('#exemplo2').priceFormat({
prefix: 'R$ ',
centsSeparator: ',',
thousandsSeparator: '.'
});
$('#exemplo3').priceFormat({
prefix: '',
thousandsSeparator: ''
});
$('#exemplo4').priceFormat({
limit: 5,
centsLimit: 3
});
$('#exemplo5').priceFormat({
clearPrefix: true
});
$('#exemplo6').priceFormat({
allowNegative: true
});
});
</script>
</head>
<body>
<h1>Máscara com jQuery em valores montários</h1>
<h2>Exemplo 1 - Básico</h2>
Resultado: <input type="text" id="exemplo1" name="basic" value="123456" />
<h2>Exemplo 2 - Customização</h2>
Resultado: <input type="text" id="exemplo2" name="customize" value="123456" />
<h2>Exemplo 3 - Pulando algumas opções</h2>
Resultado: <input type="text" id="exemplo3" name="customize" value="123456" />
<h2>Exemplo 4 - Trabalhando com limites</h2>
Resultado: <input type="text" id="exemplo4" name="customize" value="12345" />
<h2>Exemplo 5 - Limpando prefixo ao sair do campo</h2>
Resultado: <input type="text" id="exemplo5" name="customize" value="123456" />
<h2>Exemplo 6 - Permitindo negativo</h2>
Resultado: <input type="text" id="exemplo6" name="customize" value="-1231" />
</body>
</html>
Abraço e até a próxima!
Show de bola.
Valeu pela dica.
Vlw =)
Olá,
Sou desenvolvedor .NET e estou com um problema ao usar o plugin,
estou usando o plugin assim:
$(document).ready(function () {
$(‘#’).priceFormat({
prefix: ”,
centsSeparator: ‘,’,
thousandsSeparator: ‘.’
});
});
Ao carregar a página a máscara funciona normalmente.
Mais ao acessar ao o textbox na propriedade TEXT
a máscara não funciona, por exemplo, limpo o text,
ou carrego com algum texto, o campo aceita letras.
Me ajulda, por favor!
Você está usando desse jeito mesmo?
‘$(‘#’).priceFormat…’
Este comando -> $(‘#’) não vai fazer nada pois não está selecionando nenhuma elemento da página.
Nos campos que você quer deixar com máscara, coloque o atributo class igual ao valor ‘money’. Exemplo -> class=”money”
E ae faça assim:
$(‘.money’).priceFormat({
prefix: ”,
centsSeparator: ‘,’,
thousandsSeparator: ‘.’
});
Com isso você “diz” ao jQuery que quer selecionar todos os elementos que estejam definidos com a class money e que após selecionar vc quer aplicar a máscara de preço.
Att.