12 de junho de 2008

Mascaras com JQuery

Bom, necessitei de uma mascara para um campo text de valor monetário, logo pensei vamos fazer um JavaScript...
Googlei e achei vários códigos (iguais) da tal mascara de moeda... copiei funcionou, mas pesquisando ainda mais achei este site: DigitalBush Onde eles utilizam uma libs JS baseada no JQuery para montar e aí está a diferença... um código gigante que tive que adaptar com outro funcionário da empresa, para 3 linhas apenas...

Código encontrado na internet já adaptado para usar com Scriptaculos e prototype:
Mascaras.js
function mascaraMoeda(e){
var objTextBox = e.element();
var SeparadorMilesimo = '.';
var SeparadorDecimal = ',';

var sep = 0;
var key = '';
var i = j = 0;
var len = len2 = 0;
var strCheck = '0123456789';
var aux = aux2 = '';

// var whichCode = (window.Event) ? e.which : e.keyCode;
var whichCode = getKeycode(e);

if (whichCode == 13)
return true;

key = String.fromCharCode(whichCode); // Valor para o código da Chave

if (strCheck.indexOf(key) == -1)
e.stop(); // Chave inválida

len = objTextBox.value.length;
for(i = 0; i < aux =" '';" len =" aux.length;" len ="=" value =" '';" len ="=" value =" '0'+" len ="=" value =" '0'+"> 2) {
aux2 = '';
for (j = 0, i = len - 3; i >= 0; i--) {
if (j == 3) {
aux2 += SeparadorMilesimo;
j = 0;
}
aux2 += aux.charAt(i);
j++;
}
objTextBox.value = '';
len2 = aux2.length;
for (i = len2 - 1; i >= 0; i--)
objTextBox.value += aux2.charAt(i);
objTextBox.value += SeparadorDecimal + aux.substr(len - 2, len);
}
e.stop();;
}


No JSP é só colocar:
<.script type="text/javascript" src="include/script/Mascaras.js"><./script>
<.script type="text/javascript" src="include/script/ajax/prototype.js"><./script>
<.script type="text/javascript" src="include/script/ajax/scriptaculous.js?load=effects,controls"><./script>

<.script type="text/javascript">
$("txtValorIndice").observe("keypress", mascaraMoeda);<.br /><./script>


Simples código do JQuery:
Isso tudo você deve colocar num JSP
<.script src="include/script/ajax/jquery-1.2.6.js" type="text/javascript"><./script>
<.script src="include/script/ajax/jquery.maskedinput-1.1.3.js" type="text/javascript"><./script>

<.script type="text/javascript"><.br />jQuery(function($){<.br />$("#txtValorIndice").mask("9.999,99");<.br />});
<./script>

Bom então estou postando aqui as formas que encontrei de fazer tal mascara.
O JavaScript que adaptei achei ele neste blog: NoDesign

outro com JQuery:

//----------------------------------------------------------------------
$.noConflict( )
jQuery(function($){
$("#IdDoCampo").maskMoney({symbol:"R$",decimal:",",thousands:"."});
});
//----------------------------------------------------------------------

site de Referência da MaskMoney

2 comentários:

Anônimo disse...

boa dica! vlw

Diego Plentz disse...

Olá Bregaida,

Sou o novo mantenedor do projeto. O fonte dele agora está hospedado em https://github.com/plentz/jquery-maskmoney.

Att,