Mensagem numa caixa de input
29 Setembro 2008
Escrito por Gonçalo Martins

Nunca se questionou, como aparecem mensagens do nada ao lado de caixas de texto quando as seleciona? Um efeito do género do que lhe mostro abaixo pode ser atingido muito facilmente utilizando algumas linhas de javascript, e um pouco de CSS.
Como criei eu isto? Para o exemplo acima utilizei o seguinte HTML:
<label for="email" >E-mail</label>
<input type="text" onFocus="javascript:ApareceMensagem('mensagem-1')" onBlur="javascript:ApareceMensagem('mensagem-1')" maxlength="20" id="email"/>
<span id="mensagem-1" class="msg" style="visibility:hidden;">Necessario para login</span>
<label for="psw">Senha</label>
<input type="text" onFocus="javascript:ApareceMensagem('mensagem-2')" onBlur="javascript:ApareceMensagem('mensagem-2')" maxlength="20" id="psw"/>
<span id="mensagem-2" class="msg" style="visibility:hidden;">Escolha uma password forte</span>
... e um pouco de Javascript que irá alternar entre os campos, mensagem-1 e mensagem-2. Tornando-os visiveis e invisiveis.
<script type="text/javascript">
function ApareceMensagem(idElement){
element = document.getElementById(idElement);
if(element.style.visibility!='hidden'){
element.style.visibility='hidden';
} else {
element.style.visibility='visible';
}
}
</script>
O Css para este exemplo foi:
input{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana;
font-size:13px;
color:#999999;
}
label{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana;
font-size:11px;
display:block;
color:#333333;
font-weight:bold;
}
.msg{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana;
padding:3px 4px;
border:solid 1px #DEDEDE;
background:#FFFFCC;
font-size:11px;
color:#333333;
width:200px;
margin-left:2px;
}
Trackback(0)
Dezembro 26, 2008