máscara em asp

Download Máscara em Asp

Post on 22-Jul-2015

406 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

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

Mscara em Asp.Net com Javascript

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.

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

2/17

14/11/11

Mscara em Asp.Net com Javascript

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;

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

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;

Mscara em Asp.Net com Javascript

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);

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

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;

Mscara em Asp.Net com Javascript

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