<html>
<style type="text/css">
a.modelo1:link{color:#F00;}
a.modelo1:hover{color:#0F0;}
a.modelo2:link{color:#00F}
a.modelo2:hover{color:#FC0}
</style>
<body>
<a href="text.html" class="modelo1">Link Modelo 1 </a>
<a href="text.html" class="modelo2">Link Modelo 2 </a>
</body>
</html>
quinta-feira, 19 de agosto de 2010
Máscara de Data e CEP em Javascript
Nesse tutorial estarei mostrando um exemplo que máscara para os campos Data e CEP. Outros campos é só criar outras funções iguais e alterar as variáveis.
<html>
<head>
<title>Mascara de datas </title>
<script language="JavaScript" type="text/javascript">
function mascaraData(campoData)
{
var data = campoData.value;
if (data.length == 2)
{
data = data + '/';
document.form.data.value = data;
return true;
}
if (data.length == 5)
{
data = data + '/';
document.form.data.value = data;
return true;
}
}
function mascaraCEP(campocep)
{
var cep = campocep.value;
if (cep.length == 5)
{
cep = cep + '-';
document.form.cep.value = cep;
return true;
}
}
function mascaraTelefone(campotelefone)
{
var telefone = campotelefone.value;
if (telefone.length == 0)
{
telefone = telefone + '(';
document.form.telefone.value = telefone;
return true;
}
if (telefone.length == 3)
{
telefone = telefone + ')';
document.form.telefone.value = telefone;
return true;
}
}
</script>
</head>
<body>
<form name="form">
Data:
<input type="text" name="data" OnKeyUp="mascaraData(this);" maxlength="10" / >
<br>
Hora:
<input type="text" name="cep" OnKeyUp="mascaraCEP(this);" maxlength="9" / >
<br>
Telefone:
<input type="text" name="telefone" OnKeyUp="mascaraTelefone(this);" maxlength="13" / >
<br>
</form>
</body>
</html>
<html>
<head>
<title>Mascara de datas </title>
<script language="JavaScript" type="text/javascript">
function mascaraData(campoData)
{
var data = campoData.value;
if (data.length == 2)
{
data = data + '/';
document.form.data.value = data;
return true;
}
if (data.length == 5)
{
data = data + '/';
document.form.data.value = data;
return true;
}
}
function mascaraCEP(campocep)
{
var cep = campocep.value;
if (cep.length == 5)
{
cep = cep + '-';
document.form.cep.value = cep;
return true;
}
}
function mascaraTelefone(campotelefone)
{
var telefone = campotelefone.value;
if (telefone.length == 0)
{
telefone = telefone + '(';
document.form.telefone.value = telefone;
return true;
}
if (telefone.length == 3)
{
telefone = telefone + ')';
document.form.telefone.value = telefone;
return true;
}
}
</script>
</head>
<body>
<form name="form">
Data:
<input type="text" name="data" OnKeyUp="mascaraData(this);" maxlength="10" / >
<br>
Hora:
<input type="text" name="cep" OnKeyUp="mascaraCEP(this);" maxlength="9" / >
<br>
Telefone:
<input type="text" name="telefone" OnKeyUp="mascaraTelefone(this);" maxlength="13" / >
<br>
</form>
</body>
</html>
Assinar:
Postagens (Atom)