logo

maskInputMoney | Mascara de moedas | jQuery Plugin

Categoria: Plugin em 20/08/2009 | 55 Opa :)
logo
Mascara de moeda

Mascara de moeda

Para fazer formulários de fácil compreenção é sempre recomendável colocar a formatação de como o campo vai ser preenchido, para isso eu sempre recomendei o Masked Input Plugin. Porém, este plugin (que vai ser comentádo no próximo post – masked input plugin | mascaras em campo | jquery plugin) não tem formatação do tipo moeda (R$ 1,00).

Sorte nossa que o Aurélio Saraiva fez um plugin para isso e o Raul Pereira da Silva fez algumas correções. Conheçam então o maskInputMoney maskInputMoney.

//maskMoney() faz a mascara normal do Dolar
$("#dolar").maskMoney()
//Faz a mascara de moeda do Brasil
//maskMoney({symbol:"R$",decimal:",",thousands:"."})
$("#real").maskMoney({symbol:"R$",decimal:",",thousands:"."})
//Monta no modelo euro
$("#euro").maskMoney({symbol:"Euro",decimal:",",thousands:" "})
//A precisão do decimal (,000) ;
$("#precision").maskMoney({decimal:",",thousands:" ",precision:3})

//Para remover a mascara
$("#dolar").unmaskMoney();

Demo:

Link atualizado: Repositório no GitHub

Bookmark and Share

55 marcas, uhull to “maskInputMoney | Mascara de moedas | jQuery Plugin”

Comentários mais recentes »
  1. Djalma Araújo disse:
    21 de agosto de 2009 às 7:46

    Haha.. usando…. :D

    Boa ruanito!
    ps: Compra meu WII!

    Responder
  2. Vinicius disse:
    8 de outubro de 2009 às 16:36

    SHOW DE BOLA!!!!

    VLW

    Responder
  3. Marlon Pascoal disse:
    25 de janeiro de 2010 às 20:04

    Show de bola cara!

    Responder
  4. Elaine disse:
    26 de janeiro de 2010 às 16:01

    Ruan, tem como permitir q o usuario edite o valor sem ter que apagar tudo?

    Responder
  5. Ricardo Longa disse:
    27 de janeiro de 2010 às 14:56

    Ruan, você já trabalhou com JSF e RichFaces? Se a resposta for “SIM”, sabe dizer se é tranquilo usar este plugin do jQuery estes frameworks que citei?

    Abaixo segue um exemplo de JSF com o Masked Input Plugin:

    http://forum.darkside.com.br/vb/showthread.php?t=26907

    Abraço!

    Responder
  6. Geolar disse:
    26 de março de 2010 às 2:43

    Estou aprendendo, parece bom, contudo senti falta de colocar o sinal (-) nos valores.

    Responder
  7. Ricardo Longa disse:
    26 de abril de 2010 às 16:25

    Ruan, novamente eu aqui…

    A dúvida agora é a seguinte, preciso salvar o valor R$ 0,00 como um valor válido. Acontece que se eu deixar o valor 0,00 no campo o plugin limpa o campo… Isso pra mim é um GRANDE problema.

    Sabe como posso resolver isso?

    Valeu!!!!

    Responder
  8. Ricardo Longa disse:
    26 de abril de 2010 às 16:43

    O meu problema é o seguinte, tem momentos que o usuário pode deixar o campo em branco (então persistirei null na base) e tem momentos em que o usuário pode optar por configurar o valor como R$ 0,00 (então devo persistir 0.0 na base).

    Será que é complicado colocar um parâmetro a mais no plugin? Tipo aquele allowZero ou showSymbol…

    Responder
  9. Ralph Almeida disse:
    4 de maio de 2010 às 17:26

    Opa, otima função! valeu

    Responder
  10. Daniel Tré disse:
    10 de junho de 2010 às 12:49

    Pessoal,
    parabéns mesmo! Esse plugin é muito massa!!
    Quando que crescer quero ser igual a vocês!
    uhawuahwuhuhawuuawuhuawuhaw
    abraços

    Responder
  11. Fábio disse:
    21 de junho de 2010 às 15:32

    Eu nao tinha lido esse post mas nem precisa responder a pergunta que fiz no post do markedinput pois esse aqui já me repondeu perfeitamente.

    Muito obrigado!

    Fábio

    Responder
  12. Sólon Albuquerque disse:
    17 de julho de 2010 às 22:51

    Fiz algumas alterações interessantes para alguns.

    Corrigido simbologia para o Brasil;
    Bloqueado a sobreposição da máscara e duplicação de números em caso de carregamento dinâmico;
    Retorna o valor 0,00 em caso de não digitar nada.

    /*
* @Copyright (c) 2010 Solon Albuquerque
* @Page http://www.inordeste.com.br/maskMoney.js

* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.

* Versão Anterior:	2008 Aurelio Saraiva (aureliosaraiva@gmail.com)
* 					http://inovaideia.com.br/maskInputMoney

*
* SOLON ALBUQUERQUE
* CORRIGIDO SIMBOLOGIA PARA O BRASIL
* BLOQUEADO A SOBREPOSIÇÃO DA MÁSCARA E DUPLICAÇÃO DE NÚMEROS EM
* CASO DE CARREGAMENTO DINÂMICO
* RETORNA O VALOR 0,00 EM CASO DE NÃO DIGITAR NADA
*/

/*
* @Version: 0.3
* @Release: 2010-07-17
*/
(function($) {
	$.fn.maskMoney = function(settings) {
		settings = $.extend({
			symbol: "R$",
			decimal: ",",
			precision: 2,
			thousands: ".",
			showSymbol:true
		}, settings);

		settings.symbol=settings.symbol+" ";

		return this.each(function() {
			var input=$(this);
			function money(e) {
				e=e||window.event;
				var k=e.charCode||e.keyCode||e.which;
				if (k == 8) { // tecla backspace
					preventDefault(e);
					var x = input.val().substring(0,input.val().length-1);
					input.val(maskValue(x));
					return false;
				} else if (k == 9) { // tecla tab
					return true;
				}
				if (k  57) {
					preventDefault(e);
					return true;
				}
				var key = String.fromCharCode(k);  // Valor para o codigo da Chave
				preventDefault(e);
				input.val(maskValue(input.val()+key));
			}

			function preventDefault(e) {
				if (e.preventDefault) { //standart browsers
					e.preventDefault()
				} else { // internet explorer
					e.returnValue = false
				}
			}

			function maskValue(v) {
				v = v.replace(settings.symbol,"");
				var a = '';
				var strCheck = '0123456789';
				var len = v.length;
				var t = "";
				if (len== 0) {
					t = "0.00";
				}
				for (var i = 0; i < len; i++)
					if ((v.charAt(i) != '0') && (v.charAt(i) != settings.decimal))
						break;

				for (; i = 1;) {
					t = t.substr(0,p) + settings.thousands + t.substr(p);
				}
				return setSymbol(t+settings.decimal+d+Array(
					(settings.precision+1)-d.length).join(0));
			}

			function focusEvent() {
				if (input.val()=="") {
					input.val(setSymbol(getDefaultMask()));
				} else {
					input.val(setSymbol(input.val()));
				}
			}

			function blurEvent() {
				if (input.val()==setSymbol(getDefaultMask())) {
					input.val("0,00");
				} else {
					input.val(input.val().replace(settings.symbol,"").replace(settings.thousands,""));
				}
			}

			function getDefaultMask() {
				var n = parseFloat("0")/Math.pow(10, settings.precision);
				return (n.toFixed(settings.precision)).replace(
					new RegExp("\\.", "g"), settings.decimal);
			}

			function setSymbol(v) {
				if (settings.showSymbol) {
					return settings.symbol+v;
				}
				return v;
			}

			if($(input).attr('rel') == undefined) {

				$(input).attr('rel','ok');

				input.bind("keypress",money);
				input.bind("blur",blurEvent);
				input.bind("focus",focusEvent);

				input.one("unmaskMoney",function() {
					input.unbind("focus",focusEvent);
					input.unbind("blur",blurEvent);
					input.unbind("keypress",money);
					if ($.browser.msie)
					this.onpaste= null;
					else if ($.browser.mozilla)
					this.removeEventListener('input',blurEvent,false);
				});
			}

		});
	}

	$.fn.unmaskMoney=function() {
		return this.trigger("unmaskMoney");
	};
})(jQuery);

    Abraços.

    Responder
  13. Jorge Maia disse:
    29 de julho de 2010 às 13:41

    Cara, como faço pra inserir essa máscara na página?

    Responder
  14. Marcelo R Oliveira disse:
    2 de agosto de 2010 às 12:22

    Ruan, parabéns pelo plugin, muito bom mesmo.
    Abraço!

    Responder
  15. Pererinha disse:
    13 de agosto de 2010 às 12:02

    thanks dude!

    very useful!

    Responder
  16. samuel disse:
    17 de janeiro de 2011 às 17:52

    Cara muito bem feito esse plugin , abraço.

    Responder
  17. Cleber disse:
    28 de fevereiro de 2011 às 15:26

    O link http://inovaideia.com.br/maskInputMoney/, ta fora do ar…

    Responder
  18. Diego Plentz disse:
    19 de abril de 2011 às 21:45

    Olá Ruan, sou o novo mantenedor do plugin e agora ele está hospedado em https://github.com/plentz/jquery-maskmoney.

    Obrigado pelo post :)

    Responder
  19. andré disse:
    20 de maio de 2011 às 22:15

    Olá!
    A máscara ficou legal !! muito boa !!
    No entanto , não está gravando no meu banco. onde pode estar o erro?

    Responder
  20. GUILHERME PEIXOTO disse:
    14 de junho de 2011 às 20:46

    Cara fiz tudo certo, puxei o jquery, o plugin, coloquei o código postado na página, alterei o nome do input e não deu pq será? da uma olhada no meu código ai, valeu

    http://pastebin.com/EVcBA9g0

    Responder
    • Ruan Carlos disse:
      14 de junho de 2011 às 22:04

      Olá Guilherme, seguinte, seus label estão com o mesmo id que os input, como os label aparecem antes do que os input o jQuery pega eles, assim não funcionando.

      seu código:

      <label for="preco" id="preco">

      Correto:

      <label for="preco">

      Atenciosamente

      Responder
Comentários mais recentes »

logo
logo
Hospedado no Djalma | Ruan Carlos.