29

Set

Mensagem numa caixa de input
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.

 

 

mensagem input


Como criei eu isto? Para o exemplo acima utilizei o seguinte HTML:

html
  1. <label for="email" >E-mail</label>
  2. <input type="text" onFocus="javascript:ApareceMensagem('mensagem-1')" onBlur="javascript:ApareceMensagem('mensagem-1')" maxlength="20"  id="email"/>
  3. <span id="mensagem-1" class="msg" style="visibility:hidden;
  4. ">Necessario para login</span>
  5. <label for="psw">Senha</label>
  6. <input type="text" onFocus="javascript:ApareceMensagem('mensagem-2')" onBlur="javascript:ApareceMensagem('mensagem-2')" maxlength="20" id="psw"/>
  7. <span id="mensagem-2" class="msg" style="visibility:hidden;
  8. ">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.  

javascript
  1. <script type="text/javascript">
  2. function ApareceMensagem(idElement){
  3. element    = document.getElementById(idElement);
  4.  
  5.  if(element.style.visibility!='hidden'){
  6. element.style.visibility='hidden';
  7.  
  8.     } else {
  9. element.style.visibility='visible';
  10.  
  11.     }
  12. }
  13. </script>


O Css para este exemplo foi:

css
  1. input{
  2.     font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana;
  3.  
  4.     font-size:13px;
  5.  
  6.     color:#999999;
  7.  
  8. }
  9. label{
  10.     font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana;
  11.  
  12.     font-size:11px;
  13.  
  14.     display:block;
  15.  
  16.     color:#333333;
  17.  
  18.     font-weight:bold;
  19.  
  20. }
  21. .msg{
  22.     font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana;
  23.  
  24.     padding:3px 4px;
  25.  
  26.     border:solid 1px #DEDEDE;
  27.  
  28.     background:#FFFFCC;
  29.  
  30.     font-size:11px;
  31.  
  32.     color:#333333;
  33.  
  34.     width:200px;
  35.  
  36.     margin-left:2px;
  37.  
  38. }

 

Exemplo | Download

 



Gostou deste Artigo?
Subscreva o feed RSS ou reguiste-se na Newsletter do WebLouca, agora!
Categoria:
Se preferir, pode ainda deixar um comentário

PATROCINADORES


cometarios
Trackback(0)
giuseppe
Dezembro 26, 2008
http://latorespostas.vai.la

muito bom, só que serve mais para alguem que quer que o usuario se inscreva a algum serviço ou site. :/
Paulo
Agosto 26, 2009

realmente é um artigo interessante, esse mundo de Tag's de comando é infinito rs parabéns pelo trabalho, espero que algumn dia eu consiga também.

Escreva o seu Comentario
 
  pequeno | maior
 

busy
 

Patrocinadores do Site

Subscrever Feed

Artigos

Ultimos artigos
Como rodar imagens com javascript
jsimageNeste artigo vou-lhe demonstrar como rodar imagens e qualquer elemento desde div a span co...
Crie facilmente miniaturas das suas imagens com PHP
phpthumbAtualmente praticamente todos os websites possuem a necessidade de listar os seus artigos...
Otimize as suas imagens com PunyPng
benchmarksA pouco mais de um ano falei sobre uma ferramenta para otimizar imagens (Artigos/optimize...
Como redimensionar imagens com PHP
phpimageredRedimensionar uma imagem com php pode ser um processo complicado. Quando por exemplo um wo...
Links de Afiliados com Javascript - Update
linksafiliadosNo inicio do ano escrevi um artigo onde dáva a conhecer uma forma de criar links de afili...