Máscara em ASP.NET com JavaScript

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (14)  (1)

Simples máscara em Javascript aplicada em Asp.Net de CPF, CEP, CNPJ, Data, Hora, MesAno, Cartão de crédito, valores monetários, número inteiro, número flutuante (float). Fácil de aplicar e com código aberto e muito boa.

Em todo sistema web há uma necessidade de digitar campos que contenham somente números inteiros, datas entre outros.

O problema maior é que o próprio Visual Studio não tem uma máscara nativa para ASP.NET, somente existe do AjaxToolkit (vide seção Links) que não atende a vários requisitos e trava demais o usuário não deixando uma aparência boa no campo segundo várias pessoas com quem converso e eu próprio acho também.

Em cima dessa necessidade desenvolvi uma máscara Cross-Browser (funciona em qualquer browser) bem simples e com código aberto suportando números inteiros, números flutuantes, data, hora, CPF, CNPJ, cartão de crédito, mês e ano, CEP e valor monetário.

Solução

A solução mais simples encontrada é criar um arquivo JS chamado Mascara.JS aonde eu crio todos os scripts para as máscaras, depois associo os scripts ao evento onkeyup de cada TextBox ou Input Text. Para chamar a função que formatar o campo são necessários dois parâmetros, o this e o event, duas palavras reservadas no JavaScript que representam this o próprio campo e event o evento do browser para capturar a tecla pressionada.

O motivo de não criar um componente foi pra deixar o código aberto para que havendo necessidade vocês mesmos podem criar outra máscara.

Outra possibilidade seria criar meu próprio TextBox, mas isso não é muito aplicável pois quando você tem um SkinFile não poderia apontar para o componente TextBox, ou até mesmo para dar um Cast no objeto não seria possível.

Tentei simplificar ao máximo sem travar o programador.
Esta solução pode ser adequada em qualquer outra linguagem na plataforma web pois usa somente JavaScript.

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

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.


Figura 1. Criando o projeto Web

Passo 2

Vamos criar a pasta onde ficará o arquivo js.

No Solution Explorer clique com o botão direito no projeto e escolha a opção NEW FOLDER e crie uma pasta chamada JS, o resultado final será idêntico ao da Figura 2.

Máscara em ASP.NET com JavaScript

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 Explorer clique com o botão direito na pasta JS e selecione a opção ADD NEW ITEM, selecione o template JScript File e o nome do arquivo Mascara.js como mostra a Figura 3.

Máscara 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 da Listagem 1 temtodo o código bem comentado.

Listagem 1. Código JavaScript do arquivo Mascara.js

function formataMascara(campo, evt, formato)
{
 evt = getEvent(evt);
 var tecla = getKeyCode(evt);
 if (!teclaValida(tecla))
  return;

 var result = "";
 var maskIdx = formato.length - 1;
 var error = false;
 var valor = campo.value;
 var posFinal = false;
 if (campo.setSelectionRange)
 {
  if (campo.selectionStart == valor.length)
   posFinal = true;
 }
 valor = valor.replace(/[^0123456789Xx]/g, '');
 for (var valIdx = valor.length - 1; valIdx >= 0 && maskIdx >= 0; --maskIdx)
 {
  var chr = valor.charAt(valIdx);
  var chrMask = formato.charAt(maskIdx);
  switch (chrMask)
  {
   case '#':
    if (!(/\d/.test(chr)))
     error = true;
    result = chr + result;
    --valIdx;
    break;
   case '@':
    result = chr + result;
    --valIdx;
    break;
   default:
    result = chrMask + result;
  }
 }
 campo.value = result;
 campo.style.color = error ? 'red' : '';
 if (posFinal)
 {
  campo.selectionStart = result.length;
  campo.selectionEnd = result.length;
 }
 return result;
}
// Formata o campo valor monetário
function formataValor(campo, evt)
{
 //1.000.000,00
 var xPos = PosicaoCursor(campo);
 evt = getEvent(evt);
 var tecla = getKeyCode(evt);
 if (!teclaValida(tecla))
  return;
 vr = campo.value = filtraNumeros(filtraCampo(campo));
 if (vr.length > 0)
 {
  vr = parseFloat(vr.toString()).toString();
  tam = vr.length;
  if (tam == 1)
   campo.value = "0,0" + vr;
  if (tam == 2)
   campo.value = "0," + vr;
  if ((tam > 2) && (tam <= 5))
  {
   campo.value = vr.substr(0, tam - 2) + ',' + vr.substr(tam - 2, tam);
  }
  if ((tam >= 6) && (tam <= 8))
  {
   campo.value = vr.substr(0, tam - 5) + '.' + vr.substr(tam - 5, 3) + ',' + vr.substr(tam - 2, tam);
  }
  if ((tam >= 9) && (tam <= 11))
  {
   campo.value = vr.substr(0, tam - 8) + '.' + vr.substr(tam - 8, 3) + '.' + vr.substr(tam - 5, 3) + ',' + vr.substr(tam - 2, tam);
  }
  if ((tam >= 12) && (tam <= 14))
  {
   campo.value = vr.substr(0, tam - 11) + '.' + vr.substr(tam - 11, 3) + '.' + vr.substr(tam - 8, 3) + '.' + vr.substr(tam - 5, 3) + ',' + vr.substr(tam - 2, tam);
  }
  if ((tam >= 15) && (tam <= 18))
  {
   campo.value = vr.substr(0, tam - 14) + '.' + vr.substr(tam - 14, 3) + '.' + vr.substr(tam - 11, 3) + '.' + vr.substr(tam - 8, 3) + '.' + vr.substr(tam - 5, 3) + ',' + vr.substr(tam - 2, tam);
  }
 }
 MovimentaCursor(campo, xPos);
}
// Formata data no padrão DD/MM/YYYY
function formataData(campo, evt)
{
 var xPos = PosicaoCursor(campo);
 //dd/MM/yyyy
 evt = getEvent(evt);
 var tecla = getKeyCode(evt);
 if (!teclaValida(tecla))
  return;
 vr = campo.value = filtraNumeros(filtraCampo(campo));
 tam = vr.length;
 if (tam >= 2 && tam < 4)
  campo.value = vr.substr(0, 2) + '/' + vr.substr(2);
 if (tam == 4)
  campo.value = vr.substr(0, 2) + '/' + vr.substr(2, 2) + '/';
 if (tam > 4)
  campo.value = vr.substr(0, 2) + '/' + vr.substr(2, 2) + '/' + vr.substr(4);
 MovimentaCursor(campo, xPos);
}
//descobre qual a posição do cursor no campo
function PosicaoCursor(textarea)
{
 var pos = 0;
 if (typeof (document.selection) != 'undefined')
 {
  //IE
  var range = document.selection.createRange();
  var i = 0;
  for (i = textarea.value.length; i > 0; i--)
  {
   if (range.moveStart('character', 1) == 0)
    break;
  }
  pos = i;
 }
 if (typeof (textarea.selectionStart) != 'undefined')
 {
  //FireFox
  pos = textarea.selectionStart;
 }
 if (pos == textarea.value.length)
  return 0; //retorna 0 quando não precisa posicionar o elemento
 else
  return pos; //posição do cursor
}
// move o cursor para a posição pos
function MovimentaCursor(textarea, pos)
{
 if (pos <= 0)
  return; //se a posição for 0 não reposiciona
 if (typeof (document.selection) != 'undefined')
 {
  //IE
  var oRange = textarea.createTextRange();
  var LENGTH = 1;
  var STARTINDEX = pos;
  oRange.moveStart("character", -textarea.value.length);
  oRange.moveEnd("character", -textarea.value.length);
  oRange.moveStart("character", pos);
  //oRange.moveEnd("character", pos);
  oRange.select();
  textarea.focus();
 }
 if (typeof (textarea.selectionStart) != 'undefined')
 {
  //FireFox
  textarea.selectionStart = pos;
  textarea.selectionEnd = pos;
 }
}
//Formata data e hora no padrão DD/MM/YYYY HH:MM
function formataDataeHora(campo, evt)
{
 xPos = PosicaoCursor(campo);
 //dd/MM/yyyy
 evt = getEvent(evt);
 var tecla = getKeyCode(evt);
 if (!teclaValida(tecla))
  return;
 vr = campo.value = filtraNumeros(filtraCampo(campo));
 tam = vr.length;
 if (tam >= 2 && tam < 4)
  campo.value = vr.substr(0, 2) + '/' + vr.substr(2);
 if (tam == 4)
  campo.value = vr.substr(0, 2) + '/' + vr.substr(2, 2) + '/';
 if (tam > 4)
  campo.value = vr.substr(0, 2) + '/' + vr.substr(2, 2) + '/' + vr.substr(4);
 if (tam > 8 && tam < 11)
  campo.value = vr.substr(0, 2) + '/' + vr.substr(2, 2) + '/' + vr.substr(4, 4) + ' ' + vr.substr(8, 2);
 if (tam >= 11)
  campo.value = vr.substr(0, 2) + '/' + vr.substr(2, 2) + '/' + vr.substr(4, 4) + ' ' + vr.substr(8, 2) + ':' + vr.substr(10);
 campo.value = campo.value.substr(0, 16);
 //    if(xPos == 2 || xPos == 5)
 //        xPos = xPos +1;
 //    if(xPos == 11 || xPos == 14)
 //        xPos = xPos +2;
 MovimentaCursor(campo, xPos);
}
// Formata só números
function formataInteiro(campo, evt)
{
 //1234567890
 xPos = PosicaoCursor(campo);
 evt = getEvent(evt);
 var tecla = getKeyCode(evt);
 if (!teclaValida(tecla))
  return;
 campo.value = filtraNumeros(filtraCampo(campo));
 MovimentaCursor(campo, xPos);
}
// Formata hora no padrao HH:MM
function formataHora(campo, evt)
{
 //HH:mm
 xPos = PosicaoCursor(campo);
 evt = getEvent(evt);
 var tecla = getKeyCode(evt);
 if (!teclaValida(tecla))
  return;
 vr = campo.value = filtraNumeros(filtraCampo(campo));
 if (tam == 2)
  campo.value = vr.substr(0, 2) + ':';
 if (tam > 2 && tam < 5)
  campo.value = vr.substr(0, 2) + ':' + vr.substr(2);
 //    if(xPos == 2)
 //        xPos = xPos + 1;
 MovimentaCursor(campo, xPos);
}
// limpa todos os caracteres especiais do campo solicitado
function filtraCampo(campo)
{
 var s = "";
 var cp = "";
 vr = campo.value;
 tam = vr.length;
 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);
  }
 }
 return s;
 //return campo.value.replace("/", "").replace("-", "").replace(".", "").replace(",", "")
}
// limpa todos caracteres que não são números
function filtraNumeros(campo)
{
 var s = "";
 var cp = "";
 vr = campo;
 tam = vr.length;
 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);
  }
 }
 return s;
 //return campo.value.replace("/", "").replace("-", "").replace(".", "").replace(",", "")
}
// limpa todos caracteres que não são letras
function filtraCaracteres(campo)
{
 vr = campo;
 for (i = 0; i < tam; i++)
 {
  //Caracter
  if (vr.charCodeAt(i) != 32 && vr.charCodeAt(i) != 94 && (vr.charCodeAt(i) < 65 ||
        (vr.charCodeAt(i) > 90 && vr.charCodeAt(i) < 96) ||
            vr.charCodeAt(i) > 122) && vr.charCodeAt(i) < 192)
  {
   vr = vr.replace(vr.substr(i, 1), "");
  }
 }
 return vr;
}
// limpa todos caracteres que não são números, menos a vírgula
function filtraNumerosComVirgula(campo)
{
 var s = "";
 var cp = "";
 vr = campo;
 tam = vr.length;
 var complemento = 0; //flag paga contar o número de virgulas
 for (i = 0; i < tam; i++)
 {
  if ((vr.substring(i, i + 1) == "," && complemento == 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) == ",")
    complemento = complemento + 1;
   s = s + vr.substring(i, i + 1);
  }
 }
 return s;
}
function formataMesAno(campo, evt)
{
 //MM/yyyy
 var xPos = PosicaoCursor(campo);
 evt = getEvent(evt);
 var tecla = getKeyCode(evt);
 if (!teclaValida(tecla))
  return;
 vr = campo.value = filtraNumeros(filtraCampo(campo));
 tam = vr.length;
 if (tam >= 2)
  campo.value = vr.substr(0, 2) + '/' + vr.substr(2);
 MovimentaCursor(campo, xPos);
}
function formataCNPJ(campo, evt)
{
 //99.999.999/9999-99
 var xPos = PosicaoCursor(campo);
 evt = getEvent(evt);
 var tecla = getKeyCode(evt);
 if (!teclaValida(tecla))
  return;
 vr = campo.value = filtraNumeros(filtraCampo(campo));
 tam = vr.length;
 if (tam >= 2 && tam < 5)
  campo.value = vr.substr(0, 2) + '.' + vr.substr(2);
 else if (tam >= 5 && tam < 8)
  campo.value = vr.substr(0, 2) + '.' + vr.substr(2, 3) + '.' + vr.substr(5);
 else if (tam >= 8 && tam < 12)
  campo.value = vr.substr(0, 2) + '.' + vr.substr(2, 3) + '.' + vr.substr(5, 3) + '/' + vr.substr(8);
 else if (tam >= 12)
  campo.value = vr.substr(0, 2) + '.' + vr.substr(2, 3) + '.' + vr.substr(5, 3) + '/' + vr.substr(8, 4) + '-' + vr.substr(12);
 MovimentaCursor(campo, xPos);
}
function formataCPF(campo, evt)
{
 //999.999.999-99
 var xPos = PosicaoCursor(campo);
 evt = getEvent(evt);
 var tecla = getKeyCode(evt);
 if (!teclaValida(tecla))
  return;
 vr = campo.value = filtraNumeros(filtraCampo(campo));
 tam = vr.length;
 if (tam >= 3 && tam < 6)
  campo.value = vr.substr(0, 3) + '.' + vr.substr(3);
 else if (tam >= 6 && tam < 9)
  campo.value = vr.substr(0, 3) + '.' + vr.substr(3, 3) + '.' + vr.substr(6);
 else if (tam >= 9)
  campo.value = vr.substr(0, 3) + '.' + vr.substr(3, 3) + '.' + vr.substr(6, 3) + '-' + vr.substr(9);
 MovimentaCursor(campo, xPos);
}
function formataDouble(campo, evt)
{
 //18,53012
 var xPos = PosicaoCursor(campo);
 evt = getEvent(evt);
 var tecla = getKeyCode(evt);
 if (!teclaValida(tecla))
  return;
 campo.value = filtraNumerosComVirgula(campo.value);
 MovimentaCursor(campo, xPos);
}
function formataTelefone(campo, evt)
{
 //(00) 0000-0000
 var xPos = PosicaoCursor(campo);
 evt = getEvent(evt);
 var tecla = getKeyCode(evt);
 if (!teclaValida(tecla))
  return;
 vr = campo.value = filtraNumeros(filtraCampo(campo));
 tam = vr.length;
 if (tam == 1)
  campo.value = '(' + vr;
 else if (tam >= 2 && tam < 6)
  campo.value = '(' + vr.substr(0, 2) + ') ' + vr.substr(2);
 else if (tam >= 6)
  campo.value = '(' + vr.substr(0, 2) + ') ' + vr.substr(2, 4) + '-' + vr.substr(6);
 //(
 //    if(xPos == 1 || xPos == 3 || xPos == 5 || xPos == 9)
 //        xPos = xPos +1
 MovimentaCursor(campo, xPos);
}
function formataTexto(campo, evt, sMascara)
{
 //Nome com Inicial Maiuscula.
 evt = getEvent(evt);
 xPos = PosicaoCursor(campo);
 var tecla = getKeyCode(evt);
 if (!teclaValida(tecla))
  return;
 vr = campo.value = filtraCaracteres(filtraCampo(campo));
 tam = vr.length;
 if (sMascara == "Aa" || sMascara == "Xx")
 {
  var valor = campo.value.toLowerCase();
  var count = campo.value.split(" ").length - 1;
  var i;
  var pos = 0;
  var valorIni;
  var valorMei;
  var valorFim;
  valor = valor.substring(0, 1).toUpperCase() + valor.substring(1, valor.length);
  for (i = 0; i < count; i++)
  {
   pos = valor.indexOf(" ", pos + 1);
   valorIni = valor.substring(0, valor.indexOf(" ", pos - 1)) + " ";
   valorMei = valor.substring(valor.indexOf(" ", pos) + 1, valor.indexOf(" ", pos) + 2).toUpperCase();
   valorFim = valor.substring(valor.indexOf(" ", pos) + 2, valor.length);
   valor = valorIni + valorMei + valorFim;
  }
  campo.value = valor;
 }
 if (sMascara == "Aaa" || sMascara == "Xxx")
 {
  var valor = campo.value.toLowerCase();
  var count = campo.value.split(" ").length - 1;
  var i;
  var pos = 0;
  var valorIni;
  var valorMei;
  var valorFim;
  var ligacao = false;
  var chrLigacao = Array("de", "da", "do", "para", "e")
  valor = valor.substring(0, 1).toUpperCase() + valor.substring(1, valor.length);
  for (i = 0; i < count; i++)
  {
   ligacao = false;
   pos = valor.indexOf(" ", pos + 1);
   valorIni = valor.substring(0, valor.indexOf(" ", pos - 1)) + " ";
   for (var a = 0; a < chrLigacao.length; a++)
   {
    if (valor.substring(valorIni.length, valor.indexOf(" ", valorIni.length)).toLowerCase() == chrLigacao[a].toLowerCase())
    {
     ligacao = true;
     break;
    }
    else if (ligacao == false && valor.indexOf(" ", valorIni.length) == -1)
    {
     if (valor.substring(valorIni.length, valor.length).toLowerCase() == chrLigacao[a].toLowerCase())
     {
      ligacao = true;
      break;
     }
    }
   }
   if (ligacao == true)
   {
    valorMei = valor.substring(valor.indexOf(" ", pos) + 1, valor.indexOf(" ", pos) + 2).toLowerCase();
   }
   else
   {
    valorMei = valor.substring(valor.indexOf(" ", pos) + 1, valor.indexOf(" ", pos) + 2).toUpperCase();
   }
   valorFim = valor.substring(valor.indexOf(" ", pos) + 2, valor.length);
   valor = valorIni + valorMei + valorFim;
  }
  campo.value = valor;
 }
 MovimentaCursor(campo, xPos);
 return true;
}
// Formata o campo CEP
function formataCEP(campo, evt)
{
 //312555-650
 var xPos = PosicaoCursor(campo);
 evt = getEvent(evt);
 var tecla = getKeyCode(evt);
 if (!teclaValida(tecla))
  return;
 vr = campo.value = filtraNumeros(filtraCampo(campo));
 tam = vr.length;
 if (tam < 5)
  campo.value = vr;
 else if (tam == 5)
  campo.value = vr + '-';
 else if (tam > 5)
  campo.value = vr.substr(0, 5) + '-' + vr.substr(5);
 MovimentaCursor(campo, xPos);
}
function formataCartaoCredito(campo, evt)
{
 //0000.0000.0000.0000
 var xPos = PosicaoCursor(campo);
 evt = getEvent(evt);
 var tecla = getKeyCode(evt);
 if (!teclaValida(tecla))
  return;
 var vr = campo.value = filtraNumeros(filtraCampo(campo));
 var tammax = 16;
 var tam = vr.length;
 if (tam < tammax && tecla != 8)
 { tam = vr.length + 1; }
 if (tam < 5)
 { campo.value = vr; }
 if ((tam > 4) && (tam < 9))
 { campo.value = vr.substr(0, 4) + '.' + vr.substr(4, tam - 4); }
 if ((tam > 8) && (tam < 13))
 { campo.value = vr.substr(0, 4) + '.' + vr.substr(4, 4) + '.' + vr.substr(8, tam - 4); }
 if (tam > 12)
 { campo.value = vr.substr(0, 4) + '.' + vr.substr(4, 4) + '.' + vr.substr(8, 4) + '.' + vr.substr(12, tam - 4); }
 MovimentaCursor(campo, xPos);
}

//recupera tecla
//evita criar mascara quando as teclas são pressionadas
function teclaValida(tecla)
{
 if (tecla == 8 //backspace
 //Esta evitando o post, quando são pressionadas estas teclas.
 //Foi comentado pois, se for utilizado o evento texchange, é necessario o post.
        || tecla == 9 //TAB
        || tecla == 27 //ESC
        || tecla == 16 //Shif TAB 
        || tecla == 45 //insert
        || tecla == 46 //delete
        || tecla == 35 //home
        || tecla == 36 //end
        || tecla == 37 //esquerda
        || tecla == 38 //cima
        || tecla == 39 //direita
        || tecla == 40)//baixo
  return false;
 else
  return true;
}
// recupera o evento do form
function getEvent(evt)
{
 if (!evt) evt = window.event; //IE
 return evt;
}
//Recupera o código da tecla que foi pressionado
function getKeyCode(evt)
{
 var code;
 if (typeof (evt.keyCode) == 'number')
  code = evt.keyCode;
 else if (typeof (evt.which) == 'number')
  code = evt.which;
 else if (typeof (evt.charCode) == 'number')
  code = evt.charCode;
 else
  return 0;
 return code;
}

Passo 5

Vamos agora associar a máscara ao campo. Na página default.aspx adicione a referência ao arquivo js que está na pasta js, como mostra na Figura 4. O código pode ser visto melhor na Listagem 2.

Máscara em ASP.NET com JavaScript
Figura 4. Referência ao arquivo mascara.js

Listagem 2. Referência ao arquivo mascara.js

<SCRIPT src="js/mascara.js" type=text/javascript></SCRIPT

Passo 6

Agora vamos associar a máscara ao TextBox. Neste exemplo vou usar a função formataValor() q ue é o valor monetário. Existem também:

  • formataCEP – para campos CEP;
  • formataCNPJ – para campos CNPJ;
  • formataCPF – para campos CPF;
  • formataData – para campos data (dd/MM/yyyy);
  • formataMesAno – para campos que somente aceitam o mês e o ano juntos (MM/yyyy);
  • formataHora – para campos hora (HH:mm);
  • formataInteiro – para campos aonde só aceitam números inteiros;
  • formataDouble – para números flutuantes Ex: 3,14159265;
  • formataTelefone – para campos com só com telefone com DDD (00) 0000-0000;

Na página default.aspx arraste um TextBox e adicione os códigos da Listagem 3dentro da tag do TextBox. O resultado deve ficar igual a Figura 5. Adicione um style só para deixar o texto alinhado à direita.

Listagem 3.Associação da mascara ao TextBox

onkeyup=”formataValor(this,event);” style=”text-align:right”

Máscara em ASP.NET com JavaScript

Figura 5.TextBox associado a máscara

Resultado

O resultado pode ser visto na Figura 6. Enquanto o usuário digita o valor o TextBox vai moldando para o formato da máscara.

Máscara em ASP.NET com JavaScript
Figura 6.Teste da máscara

A máscara ajuda muito o usuário na hora de digitar, isso dá mais qualidade ao seu sistema e com certeza trará mais credibilidade e confiabilidade com seu cliente.

Essa máscara é simples e funciona bem em qualquer browser. Uma máscara muito travada pode até piorar o sistema, e ao invés de ajudar você acaba piorando a vida do usuário.

Um grande abraço e muito obrigado!

Qualquer dúvida estou a disposição na sessão de comentários do site

Links

Ajax Toolkit

http://www.asp.net/AJAX/AjaxControlToolkit/Samples/MaskedEdit/MaskedEdit.aspx

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?