Salve amigos,
Estou aqui outra vez para compartilhar com vocês, um problema que enfrentei e após muito pesquisar encontrei uma solução muito simples. Talvez muitos já tenham passado por isso e resolveram facilmente, outros assim como eu não tão fácil, mas vale a dica, então vamos começar.
Imaginem a seguinte situação:
Vamos construir uma página onde será realizado o cadastro de usuário e nesse cadastro pede-se um campo em especial, no nosso caso o campo será o CPF. Esta página vai herdar uma MasterPage e ai vem o problema. Bem, todos nós sabemos que este campo sofre muitas verificações antes de ser enviado ao banco de dados, nós vamos, através de Javascript, limitar o usuário a digitar somente números neste campo e ainda vamos formatar o campo de acordo com as nossas preferências enquanto o usuário digita.
Vamos então ao trabalho!
Crie um novo projeto website através do VS 2005.
Neste projeto adicione uma MasterPage e faça nela uma formatação qualquer, obviamente não esqueça de adicionar um contentPlaceHolder. Veja como ficou a minha página índex.master na figura 1.0.
Figura 1.0 - Layout Simples para a MasterPage
Como você pode ver, fiz um layout muitíssimo simples para este exemplo.
Agora vamos criar uma página que deve ser a de cadastro de usuário.
Adicione uma nova página, desta vez um webform e selecione a MasterPage index.master, vou chama-la de regitro_de_usuario.aspx e nela vamos colocar um campo apenas para não nos estendermos muito.
ControlePropiedades
TextBoxID = txtCPF
MaxLength = 14
Width = 110px
Veja como ficou na figura 1.1.
Figura 1.1 - TextBox Formatado.
Antes de criarmos os códigos necessários para o perfeito funcionamento do textbox vamos rodar a página e revelar um pequeno “segredinho”.
Ao rodar sua aplicação, clique com o botão direito do mouse sobre a página e exiba o código fonte da mesma. Em seguida procure no código gerado pelo nome do controle txtCPF como mostra a figura 1.2.
Figura 1.2 – Localizando o ID do controle.
Repare que o controle ao ser renderizado assume outro nome e não mais apenas txtCPF e conseqüentemente é com esse nome que vamos trabalhar em nossa função JavaScript!
Copie esse nome todo entre aspas e vamos criar nosso arquivo .js.
Adicione ao projeto um novo arquivo do tipo JavaScript File, vamos chamá-lo de funções.js. Nesse arquivo adicione a seguinte função:
function formataCPF(e)
{
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
var character = String.fromCharCode(code);
if(code==8)
{}
else
{
if(code > 47 && code < 58)
{
//-------------
var conteudo;
conteudo = document.getElementById("ctl00_ContentPlaceHolder1_txtCPF").value;
if(conteudo.length==3)
{
conteudo = conteudo + .;
document.getElementById("ctl00_ContentPlaceHolder1_txtCPF").value = conteudo;
}
else if(conteudo.length==7)
{
conteudo = conteudo + .;
document.getElementById("ctl00_ContentPlaceHolder1_txtCPF").value = conteudo;
}
else if(conteudo.length==11)
{
conteudo = conteudo + -;
document.getElementById("ctl00_ContentPlaceHolder1_txtCPF").value = conteudo;
}
}
else
{
event.keyCode = 0;
}
}
}
Esta função talvez não seja a mais perfeita e mais ideal das funções JavaScript, apenas à fiz assim para simplificar sua estrutura. A grande jogada se encontra nas linhas:
document.getElementById("ctl00_ContentPlaceHolder1_txtCPF").value
Neste código nós pegamos o valor da caixa de texto e também passamos o novo valor formatado para esta mesma caixa de texto!
Vale lembrar que o nome ctl00_ContentPlaceHolder1_txtCPF só se faz necessário porque estamos usando MasterPage, se não simplesmente document.getElementById("txtCPF").value.
Agora na MasterPage adicione entre as tags <head> </head> a tag de script:
<head runat="server">
<title>Master Page - Funções JavaScript</title>
<script language="javascript" type="text/javascript" src="funcoes.js"></script>
</head>
E por último no evento Page_Load da página registro_de_usuario.aspx adicione o atributo onkeypress ao controle textbox.
public partial class registro_de_usuario : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
txtCPF.Attributes.Add("onkeypress","return formataCPF(event);");
}
}
Rode sua aplicação e tente digitar letras ou caracteres especiais, verá que não é possível. Você também vai notar que ao digitar os números o campo é formatado. Figura 1.3.
Figura 1.3 - Resultado final da função JavaScript
É isso ai!!! A função é simples mas roda perfeitamente...rsrrsrs
Bem amigos, vou ficando por aqui, espero ter ajudado ao menos um pouquinho!
Um abraço a todos e até o próximo!!!
