Máscara em Asp

14/11/11

Mscara em Asp.Net com Javascript

Pesq isar

Hom e

Entenda o site

RevistasLO GIN:

Tecnologias

CursosSENHA:

Loja Virtual

F rum

Servios

PublicarC adastre -se

Assine

Com pre Crditos

Bem vindo a DevMedia!

Esque ci m inha se nha

download

d seu feedback

post favoritoVoc e st e m : canal .ne t +.net: artigos | vde os | cursos

M scara em Asp.Net com JavascriptSimples mscara em Javascript aplicada em Asp.Net de CPF, CEP, CNPJ, Data, Hora, MesAno, Carto de crdito, valores monetrios, n mero inteiro, n mero flutuante (float). Fcil de aplicar e com cdigo aberto e muito boa. Tweet 0Share

White Papers

Curtir

Uma pessoa curtiu isso.

Estudo compara banco de dados Informi e Micro

Introduo

A International Technology Grou as vantagens do IBM Informix s Microsoft SQL Server, para orga de mdio porte.

P blicidade

Em todo sistema web h uma necessidade de digitar campos que contenham somente n meros inteiros, datas entre outros. O problema maior que o prprio Visual Studio no tem uma mscara nativa para asp.net, somente existe do AjaxToolkit http://www.asp.net/AJAX/AjaxControlToolkit/Samples/MaskedEdit/MaskedEdit.aspx que no atende a vrios requisitos e trava demais o usurio no deixando uma aparncia boa no campo segundo vrias pessoas com quem converso e eu prprio acho tambm. Em cima dessa necessidade desenvolvi uma mscara Cross-Browser (funciona em qualquer browser) bem simples e com cdigo aberto suportando n meros inteiros, n meros flutuantes, data, hora, CPF, CNPJ, carto de crdito, ms e ano, CEP e valor monetrio.

Soluo

AutorA soluo mais simples encontrada criar um arquivo JS chamado Mascara.JS aonde eu crio todos os scripts para as mscaras, depois associo os scripts ao evento onkeyup de cada TextBox ou Input Text. Para chamar a funo que formatar o campo so necessrios dois parmetros, o this e o event, duas palavras reservadas no JavaScript que representam this o prprio campo e event o evento do browser para capturar a tecla pressionada. O motivo de no criar um componente foi pra deixar o cdigo aberto para que havendo necessidade vocs mesmos podem criar outra mscara. Outra possibilidade seria criar meu prprio TextBox, mas isso no muito aplicvel pois quando voc tem um SkinFile no poderia apontar para o componente TextBox, ou at mesmo para dar um Cast no objeto no seria possvel. Tentei simplificar ao mximo sem travar o programador. Esta soluo pode ser adequada em qualquer outra linguagem na plataforma web pois usa somente JavaScript.Favorito: Coment rios:

Tiago Silva Dant

Sou e spe cialista e m Te cnologia da Info Faculdade Pitgora e m Siste m as de In pe la faculdade C ot t cnico e m Proce ss Dados pe lo col gio Espe cialista e m AS de se nvolve dor 3 e s MSDN e ce rtificado C SS pe la W 3Schoo

Space do autor

Estat sticas13 vez(es) 13

Ento vamos ao que interessa. Para criar nosso exemplo vou utilizar o Visual Studio 2008 com SP1 e executarei o site no browser Google Chrome beta.

Feedback: Utilidade: 6

devmedia.com.br/post-10252-Mascara-em-Asp-Net-com-Ja

Servi os 1/17

14/11/11


Passo 1 Abra o visual Studio e vamos criar um novo WebSite e cham-lo de TesteMascara, salvei o meu na pasta i:\Artigos como mostra na Figura 1.

Servi osInclua um comentrio Adicionar aos Favoritos Marcar como lido/assistido Incluir anotao pessoal D seu voto para este post Verso para impresso

Figura 1

Criando o projeto Web

Passo 2 Vamos criar a pasta onde ficar o arquivo js. No Solution E plorer clique com o boto direito no projeto e escolha a opo NEW FOLDER e crie uma pasta chamada JS, o resultado final ser idntico ao da Figura 2.

Figura 2

Criando pasta JS

Passo 3 Vamos agora criar o arquivo JS que ter todos os c digos JavaScript para formatar o campo texto. No Solution E plorer clique com o boto direito na pasta JS e selecione a opo ADD NEW ITEM, selecione o template JScript File e o nome do arquivo Mascara.js como mostra a Figura 3.


2/17

14/11/11


Figura 3

Adicionando arquivo Mascara.js

Passo 4 Vamos acrescentar o c digo JavaScript ao arquivo que acabamos de criar. O c digo vou postar no Quadro 1 tudo de uma vez mas ele bem comentado.

function form ataMascara(cam po, e vt, form ato) { e vt = ge tEve nt(e vt); var te cla = ge tKe yC ode (e vt); if (!te claValida(te cla)) re turn;

var re sult = ""; var m ask Idx = form ato.le ngth - 1; var e rror = false ; var valor = cam po.value ; var posFinal = false ; if (cam po.se tSe le ctionR ange ) { if (cam po.se le ctionStart == valor.le ngth) posFinal = true ;

valor = valor.re place (/[^0123456789Xx ]/g, ''); for (var valIdx = valor.le ngth - 1; valIdx >= 0 && m ask Idx >= 0; --m ask Idx ) { var chr = valor.charAt(valIdx ); var chrMask = form ato.charAt(m ask Idx ); switch (chrMask ) { case '#': if (!(/\d/.te st(chr))) e rror = true ; re sult = chr + re sult; --valIdx ; bre ak ; case '@': re sult = chr + re sult; --valIdx ; bre ak ; de fault: re sult = chrMask + re sult;


3/17

14/11/11cam po.value = re sult; cam po.style .color = e rror ? 're d' : ''; if (posFinal) { cam po.se le ctionStart = re sult.le ngth; cam po.se le ctionEnd = re sult.le ngth; } re turn re sult; } // Form ata o cam po valor m one trio function form ataValor(cam po, e vt) { //1.000.000,00 var x Pos = PosicaoC ursor(cam po); e vt = ge tEve nt(e vt); var te cla = ge tKe yC ode (e vt); if (!te claValida(te cla)) re turn;


vr = cam po.value = filtraNum e ros(filtraC am po(cam po)); if (vr.le ngth > 0) { vr = parse Float(vr.toString()).toString(); tam = vr.le ngth; if (tam == 1) cam po.value = "0,0" + vr; if (tam == 2) cam po.value = "0," + vr; if ((tam > 2) && (tam = 6) && (tam = 9) && (tam = 12) && (tam = 15) && (tam = 2 && tam < 4) cam po.value = vr.substr(0, 2) + '/' + vr.substr(2); if (tam == 4) cam po.value = vr.substr(0, 2) + '/' + vr.substr(2, 2) + '/'; if (tam > 4) cam po.value = vr.substr(0, 2) + '/' + vr.substr(2, 2) + '/' + vr.substr(4); Movim e ntaC ursor(cam po, x Pos); } //de scobre qual a posi o do cursor no cam po function PosicaoC ursor(te x tare a) { var pos = 0; if (type of (docum e nt.se le ction) != 'unde fine d') { //IE var range = docum e nt.se le ction.cre ate R ange (); var i = 0; for (i = te x tare a.value .le ngth; i > 0; i--) { if (range .m ove Start('characte r', 1) == 0) bre ak ; } pos = i; } if (type of (te x tare a.se le ctionStart) != 'unde fine d') { //Fire Fox pos = te x tare a.se le ctionStart; } if (pos == te x tare a.value .le ngth) re turn 0; //re torna 0 quando no pre cisa posicionar o e le m e nto

e lse re turn pos; //posi o do cursor } // m ove o cursor para a posi o pos function Movim e ntaC ursor(te x tare a, pos) { if (pos = 2 && tam < 4) cam po.value = vr.substr(0, 2) + '/' + vr.substr(2); if (tam == 4) cam po.value = vr.substr(0, 2) + '/' + vr.substr(2, 2) + '/'; if (tam > 4) cam po.value = vr.substr(0, 2) + '/' + vr.substr(2, 2) + '/' + vr.substr(4); if (tam > 8 && tam < 11) cam po.value = vr.substr(0, 2) + '/' + vr.substr(2, 2) + '/' + vr.substr(4, 4) + ' ' + vr.substr(8, 2); if (tam >= 11) cam po.value = vr.substr(0, 2) + '/' + vr.substr(2, 2) + '/' + vr.substr(4, 4) + ' ' + vr.substr(8, 2) + ':' + vr.substr(10); cam po.value = cam po.value .substr(0, 16); // // // // if(x Pos == 2 || x Pos == 5) x Pos = x Pos +1; if(x Pos == 11 || x Pos == 14) x Pos = x Pos +2;

Movim e ntaC ursor(cam po, x Pos); } // Form ata s n m e ros function form ataInte iro(cam po, e vt) { //1234567890 x Pos = PosicaoC ursor(cam po); e vt = ge tEve nt(e vt); var te cla = ge tKe yC ode (e vt); if (!te claValida(te cla)) re turn; cam po.value = filtraNum e ros(filtraC am po(cam po)); Movim e ntaC ursor(cam po, x Pos); } // Form ata hora no padrao HH:MM function form ataHora(cam po, e vt) { //HH:m m x Pos = PosicaoC ursor(cam po);


6/17

14/11/11e vt = ge tEve nt(e vt); var te cla = ge tKe yC ode (e vt); if (!te claValida(te cla)) re turn;


vr = cam po.value = filtraNum e ros(filtraC am po(cam po)); if (tam == 2) cam po.value = vr.substr(0, 2) + ':'; if (tam > 2 && tam < 5) cam po.value = vr.substr(0, 2) + ':' + vr.substr(2); // // if(x Pos == 2) x Pos = x Pos + 1;

Movim e ntaC ursor(cam po, x Pos); }

// lim pa todos os caracte re s e spe ciais do cam po solicitado function filtraC am po(cam po) { var s = ""; var cp = ""; vr = cam po.value ; tam = vr.le ngth; for (i = 0; i < tam ; i++) { if (vr.substring(i, i + 1) != "/" && vr.substring(i, i + 1) != "-" && vr.substring(i, i + 1) != "." && vr.substring(i, i + 1) != "(" && vr.substring(i, i + 1) != ")" && vr.substring(i, i + 1) != ":" && vr.substring(i, i + 1) != ",") { s = s + vr.substring(i, i + 1); } } re turn s; //re turn cam po.value .re place ("/", "").re place ("-", "").re place (".", "").re place (",", "") } // lim pa todos caracte re s que no so n m e ros function filtraNum e ros(cam po) { var s = ""; var cp = ""; vr = cam po; tam = vr.le ngth; for (i = 0; i < tam ; i++) { if (vr.substring(i, i + 1) == "0" || vr.substring(i, i + 1) == "1" || vr.substring(i, i + 1) == "2" || vr.substring(i, i + 1) == "3" || vr.substring(i, i + 1) == "4" || vr.substring(i, i + 1) == "5" || vr.substring(i, i + 1) == "6" || vr.substring(i, i + 1) == "7" || vr.substring(i, i + 1) == "8" || vr.substring(i, i + 1) == "9") { s = s + vr.substring(i, i + 1); }


7/17

14/11/11} } re turn s;


//re turn cam po.value .re place ("/", "").re place ("-", "").re place (".", "").re place (",", "") } // lim pa todos caracte re s que no so le tras function filtraC aracte re s(cam po) { vr = cam po; for (i = 0; i < tam ; i++) { //C aracte r if (vr.charC ode At(i) != 32 && vr.charC ode At(i) != 94 && (vr.charC ode At(i) < 65 || (vr.charC ode At(i) > 90 && vr.charC ode At(i) < 96) || vr.charC ode At(i) > 122) && vr.charC ode At(i) < 192) { vr = vr.re place (vr.substr(i, 1), ""); } } re turn vr; } // lim pa todos caracte re s que no so n m e ros, m e nos a vrgula function filtraNum e rosC om Virgula(cam po) { var s = ""; var cp = ""; vr = cam po; tam = vr.le ngth; var com ple m e nto = 0; //flag paga contar o n m e ro de virgulas for (i = 0; i < tam ; i++) { if ((vr.substring(i, i + 1) == "," && com ple m e nto == 0 && s != "") || vr.substring(i, i + 1) == "0" || vr.substring(i, i + 1) == "1" || vr.substring(i, i + 1) == "2" || vr.substring(i, i + 1) == "3" || vr.substring(i, i + 1) == "4" || vr.substring(i, i + 1) == "5" || vr.substring(i, i + 1) == "6" || vr.substring(i, i + 1) == "7" || vr.substring(i, i + 1) == "8" || vr.substring(i, i + 1) == "9") { if (vr.substring(i, i + 1) == ",") com ple m e nto = com ple m e nto + 1; s = s + vr.substring(i, i + 1); } } re turn s; } function form ataMe sAno(cam po, e vt) { //MM/yyyy var x Pos = PosicaoC ursor(cam po); e vt = ge tEve nt(e vt); var te cla = ge tKe yC ode (e vt); if (!te claValida(te cla)) re turn;


8/17

14/11/11


vr = cam po.value = filtraNum e ros(filtraC am po(cam po)); tam = vr.le ngth; if (tam >= 2) cam po.value = vr.substr(0, 2) + '/' + vr.substr(2); Movim e ntaC ursor(cam po, x Pos);

function form ataC NPJ(cam po, e vt) { //99.999.999/9999-99 var x Pos = PosicaoC ursor(cam po); e vt = ge tEve nt(e vt); var te cla = ge tKe yC ode (e vt); if (!te claValida(te cla)) re turn; vr = cam po.value = filtraNum e ros(filtraC am po(cam po)); tam = vr.le ngth; if (tam >= 2 && tam < 5) cam po.value = vr.substr(0, 2) + '.' + vr.substr(2); e lse if (tam >= 5 && tam < 8) cam po.value = vr.substr(0, 2) + '.' + vr.substr(2, 3) + '.' + vr.substr(5); e lse if (tam >= 8 && tam < 12) cam po.value = vr.substr(0, 2) + '.' + vr.substr(2, 3) + '.' + vr.substr(5, 3) + '/' + vr.substr(8); e lse if (tam >= 12) cam po.value = vr.substr(0, 2) + '.' + vr.substr(2, 3) + '.' + vr.substr(5, 3) + '/' + vr.substr(8, 4) + '-' + vr.substr(12); Movim e ntaC ursor(cam po, x Pos);

function form ataC PF(cam po, e vt) { //999.999.999-99 var x Pos = PosicaoC ursor(cam po); e vt = ge tEve nt(e vt); var te cla = ge tKe yC ode (e vt); if (!te claValida(te cla)) re turn; vr = cam po.value = filtraNum e ros(filtraC am po(cam po)); tam = vr.le ngth; if (tam >= 3 && tam < 6) cam po.value = vr.substr(0, 3) + '.' + vr.substr(3); e lse if (tam >= 6 && tam < 9) cam po.value = vr.substr(0, 3) + '.' + vr.substr(3, 3) + '.' + vr.substr(6); e lse if (tam >= 9) cam po.value = vr.substr(0, 3) + '.' + vr.substr(3, 3) + '.' + vr.substr(6, 3) + '-' + vr.substr(9); Movim e ntaC ursor(cam po, x Pos);

function form ataDouble (cam po, e vt) { //18,53012 var x Pos = PosicaoC ursor(cam po); e vt = ge tEve nt(e vt); var te cla = ge tKe yC ode (e vt); if (!te claValida(te cla)) re turn; cam po.value = filtraNum e rosC om Virgula(cam po.value ); Movim e ntaC ursor(cam po, x Pos);


9/17

14/11/11


function form ataTe le fone (cam po, e vt)

//(00) 0000-0000 var x Pos = PosicaoC ursor(cam po); e vt = ge tEve nt(e vt); var te cla = ge tKe yC ode (e vt); if (!te claValida(te cla)) re turn; vr = cam po.value = filtraNum e ros(filtraC am po(cam po)); tam = vr.le ngth; if (tam == 1) cam po.value = '(' + vr; e lse if (tam >= 2 && tam < 6) cam po.value = '(' + vr.substr(0, 2) + ') ' + vr.substr(2); e lse if (tam >= 6) cam po.value = '(' + vr.substr(0, 2) + ') ' + vr.substr(2, 4) + '-' + vr.substr(6); //( // // if(x Pos == 1 x Pos == 3 x Pos == 5 x Pos == 9)

x Pos = x Pos +1

Movim e ntaC ursor(cam po, x Pos);

function form ataTe x to(cam po, e vt, sMascara)

//Nom e com Inicial Maiuscula. e vt = ge tEve nt(e vt); x Pos = PosicaoC ursor(cam po); var te cla = ge tKe yC ode (e vt); if (!te claValida(te cla)) re turn; vr = cam po.value = filtraC aracte re s(filtraC am po(cam po)); tam = vr.le ngth; if (sMascara == "Aa" sMascara == "Xx ")

var valor = cam po.value .toLowe rC ase (); var count = cam po.value .split(" ").le ngth - 1; var i; var pos = 0; var valorIni; var valorMe i; var valorFim ; valor = valor.substring(0, 1).toUppe rC ase () + valor.substring(1, valor.le ngth); for (i = 0; i < count; i++)

pos = valor.inde x O f(" ", pos + 1); valorIni = valor.substring(0, valor.inde x O f(" ", pos - 1)) + " "; valorMe i = valor.substring(valor.inde x O f(" ", pos) + 1, valor.inde x O f(" ", pos) + 2).toUppe rC ase (); valorFim = valor.substring(valor.inde x O f(" ", pos) + 2, valor.le ngth); valor = valorIni + valorMe i + valorFim ;

cam po.value = valor;

if (sMascara == "Aaa"

sMascara == "Xx x ")

var valor = cam po.value .toLowe rC ase (); var count = cam po.value .split(" ").le ngth - 1; var i;


10/17

14/11/11

var i; var pos = 0; var valorIni; var valorMe i; var valorFim ; var ligacao = false ;


var chrLigacao = Array("de ", "da", "do", "para", "e ") valor = valor.substring(0, 1).toUppe rC ase () + valor.substring(1, valor.le ngth); for (i = 0; i < count; i++) { ligacao = false ; pos = valor.inde x O f(" ", pos + 1); valorIni = valor.substring(0, valor.inde x O f(" ", pos - 1)) + " "; for (var a = 0; a < chrLigacao.le ngth; a++) { if (valor.substring(valorIni.le ngth, valor.inde x O f(" ", valorIni.le ngth)).toLowe rC ase () == chrLigacao[a].toLowe rC ase ()) { ligacao = true ; bre ak ;

e lse if (ligacao == false && valor.inde x O f(" ", valorIni.le ngth) == -1) { if (valor.substring(valorIni.le ngth, valor.le ngth).toLowe rC ase () == chrLigacao[a].toLowe rC ase ()) { ligacao = true ; bre ak ;

if (ligacao == true ) { valorMe i = valor.substring(valor.inde x O f(" ", pos) + 1, valor.inde x O f(" ", pos) + 2).toLowe rC ase ();

e lse { valorMe i = valor.substring(valor.inde x O f(" ", pos) + 1, valor.inde x O f(" ", pos) + 2).toUppe rC ase ();

valorFim = valor.substring(valor.inde x O f(" ", pos) + 2, valor.le ngth); valor = valorIni + valorMe i + valorFim ;

cam po.value = valor;

Movim e ntaC ursor(cam po, x Pos); re turn true ;

// Form ata o cam po C EP function form ataC EP(cam po, e vt) { //312555-650 var x Pos = PosicaoC ursor(cam po); e vt = ge tEve nt(e vt); var te cla = ge tKe yC ode (e vt); if (!te claValida(te cla)) re turn; vr = cam po.value = filtraNum e ros(filtraC am po(cam po)); tam = vr.le ngth;


11/17

14/11/11if (tam < 5) cam po.value = vr; e lse if (tam == 5) cam po.value = vr + '-'; e lse if (tam > 5)


cam po.value = vr.substr(0, 5) + '-' + vr.substr(5); Movim e ntaC ursor(cam po, x Pos); } function form ataC artaoC re dito(cam po, e vt) { //0000.0000.0000.0000 var x Pos = PosicaoC ursor(cam po); e vt = ge tEve nt(e vt); var te cla = ge tKe yC ode (e vt); if (!te claValida(te cla)) re turn; var vr = cam po.value = filtraNum e ros(filtraC am po(cam po)); var tam m ax = 16; var tam = vr.le ngth; if (tam < tam m ax && te cla != 8) { tam = vr.le ngth + 1; } if (tam < 5) { cam po.value = vr; } if ((tam > 4) && (tam < 9)) { cam po.value = vr.substr(0, 4) + '.' + vr.substr(4, tam - 4); } if ((tam > 8) && (tam < 13)) { cam po.value = vr.substr(0, 4) + '.' + vr.substr(4, 4) + '.' + vr.substr(8, tam - 4); } if (tam > 12) { cam po.value = vr.substr(0, 4) + '.' + vr.substr(4, 4) + '.' + vr.substr(8, 4) + '.' + vr.substr(12, tam - 4); } Movim e ntaC ursor(cam po, x Pos); }

//re cupe ra te cla //e vita criar m ascara quando as te clas so pre ssionadas function te claValida(te cla) { if (te cla == 8 //back space //Esta e vitando o post, quando so pre ssionadas e stas te clas. //Foi com e ntado pois, se for utilizado o e ve nto te x change , ne ce ssario o post.

|| te cla == 9 //TAB || te cla == 27 //ESC || te cla == 16 //Shif TAB || te cla == 45 //inse rt || te cla == 46 //de le te || te cla == 35 //hom e || te cla == 36 //e nd || te cla == 37 //e sque rda || te cla == 38 //cim a || te cla == 39 //dire ita || te cla == 40)//baix o re turn false ; e lse re turn true ; } // re cupe ra o e ve nto do form function ge tEve nt(e vt)


12/17

14/11/11{

function ge tEve nt(e vt)


if (!e vt) e vt = window.e ve nt; //IE re turn e vt; } //R e cupe ra o c digo da te cla que foi pre ssionado function ge tKe yC ode (e vt) { var code ; if (type of (e vt.k e yC ode ) == 'num be r') code = e vt.k e yC ode ; e lse if (type of (e vt.which) == 'num be r') code = e vt.which; e lse if (type of (e vt.charC ode ) == 'num be r') code = e vt.charC ode ; e lse re turn 0; re turn code ; }

Quadro 1

Cdigo JavaScript do arquivo Mascara.js

Passo 5 Vamos agora associar a mscara ao campo. Na pgina default.aspx adicione a referncia ao arquivo js que est na pasta js, como mostra na Figura 4. O cdigo pode ser visto melhor no Quadro 2.

Figura 4

Referncia ao arquivo mascara.js

CIT r=j/acr.s et /aacit SRP> = 65 && tecla = 186 && tecla = 220 && tecla

Máscara em Asp

Documents

Transcript of Máscara em Asp