maskInputMoney | Mascara de moedas | jQuery Plugin

Categoria: Plugin em 20/08/2009 | 26 Opa :)

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.

//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:

Dolar:

Real:

Euro:

Dolar:

Site

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

Djalma Araújo disse:

21 de agosto de 2009 às 7:46

Haha.. usando….

Boa ruanito!
ps: Compra meu WII!

Responder
- Ruan Carlos disse:
  
  21 de agosto de 2009 às 8:12
  
  Doa seu WII pra mim!!!
  
  Responder
Vinicius disse:

8 de outubro de 2009 às 16:36

SHOW DE BOLA!!!!

VLW

Responder
- Ruan Carlos disse:
  
  8 de outubro de 2009 às 16:58
  
  Obrigado você pelo comentário
  
  Responder
Marlon Pascoal disse:

25 de janeiro de 2010 às 20:04

Show de bola cara!

Responder
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
- Ruan Carlos disse:
  
  26 de janeiro de 2010 às 16:12
  
  Se você alterar o código do plugin sim.
  
  Responder
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
- Ruan Carlos disse:
  
  27 de janeiro de 2010 às 20:15
  
  Ricardo, sinto muito mas não manjo nada de Rich Faces e JSF
  
  Responder
  - Ricardo Longa disse:
    
    28 de janeiro de 2010 às 7:07
    
    Sem problemas Ruan, consegui fazer o que precisava e logo logo vou postar as dicas no meu blog.
    
    Um abraço!
    
    Responder
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
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
- Ruan Carlos disse:
  
  26 de abril de 2010 às 16:28
  
  No seu backend if(valor == “”) {valor = 0,00;} Ou vc pode dar uma mexida no código do plugin.
  
  Responder
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
- Ruan Carlos disse:
  
  26 de abril de 2010 às 17:00
  
  O que dá para fazer é alterar essa parte do código.
```
function blurEvent() {
	if (input.val()==setSymbol(getDefaultMask())) {
		//input.val("");
	} else {
		input.val(input.val().replace(settings.symbol,""))
	}
}
```
  Como pode ser visto cometar a linha: input.val("");
  
  Responder
  - Ricardo Longa disse:
    
    26 de abril de 2010 às 17:06
    
    Funcionou… Valeu pela ajuda!
    
    Um abraço!
    
    Responder
Ralph Almeida disse:

4 de maio de 2010 às 17:26

Opa, otima função! valeu

Responder
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
- Ruan Carlos disse:
  
  11 de junho de 2010 às 20:10
  
  Hehehe. =D
  
  Responder
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

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 ==  { // 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 &lt; len; i++)
					if ((v.charAt(i) != &#039;0&#039;) &amp;&amp; (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

Ruan Carlos disse:

17 de julho de 2010 às 23:47

Cara, obrigadão.

Vai ser de grande ajuda a todos.

Responder

Jorge Maia disse:

29 de julho de 2010 às 13:41

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

Responder
- Ruan Carlos disse:
  
  29 de julho de 2010 às 13:47
  
  Basta adicionar o plugin na sua página e colocar o código postado aqui. Não esquece que precisa do jQuery para isso funcionar.
  
  Responder
Marcelo R Oliveira disse:

2 de agosto de 2010 às 12:22

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

Responder
Pererinha disse:

13 de agosto de 2010 às 12:02

thanks dude!

very useful!

Responder