Apagar texto em input usando jQuery e css

• Home-
• CSS, javaScript, jQuery/
• autor: Adriano Meira /
• publicado em: 26/03/2012

Olá pessoal meu nome é Tiago agenor sou desenvolvedor da Brasil na Web e estou dando uma força para o Adriano no seu blog escrevendo alguns artigos. Hoje vou falar um pouco de como podemos fazer com que ao colocar o cursor sobre um campo de input ele altere suas propriedades.

 

Para fazer o efeito vamos seguir os seguintes códigos abaixo:

1- Preparando o html

<form id="form1" name="form1" method="post" action="">
     <input type="text" id="busca" value="Busca..." />
</form>

Preste bastante atenção no id e no value do input que você colocou porque vamos utilizar ele mais afrente.
O id que estamos utilizando chama  busca value Busca… .

2- Instancie o seu jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

2- Criando a função  “inputEfeito”

Pessoal essa e a função que vai fazer o efeito dentro do imput copie e cole ela abaixo do jQuery

<script type="text/javascript">

function inputEfeito(nome,valor,corFoco,corPerdeFoco,sizeFoco,sizePerdeFoco){
       $(nome).focus(function(){
               if($(this).val() == valor){
                      $(this).val("");
                      $(this).css("color",corFoco);
                      $(this).animate({width:sizeFoco});
               }
        });
       $(nome).blur(function(){
               if($(this).val() == ""){
                      $(this).val(valor);
                      $(this).css("color",corPerdeFoco);
                      $(this).animate({width:sizePerdeFoco});
               }
        });
}

</script>

Repare que estamos usando duas funções dentro de “inputEfeito” a primeira a “focus” que é quando o usuário da o foco para o input.

E a segunda função é  “blur” quando o input perde o foco.

3-Chamando Função “inputEfeito”

<script type="text/javascript">

inputEfeito("id do campo","nome do campo","cor quando tiver foco","cor quando perde o foco","tamanho inicial do input","tamanho final do input");

</script>

ex:

<script type="text/javascript">
    inputEfeito("#busca","Busca...","#999999","#000000","50px","100px");
</script>

 

---

Tweet