Trocando o texto quando dar foco em campo

21/10/2009

Agência OFF, desenvolvimento de soluções web para as Agências Digitais

Script simples:


<script type="text/javascript">
function limpar(campo){
	if (campo.value == campo.defaultValue){
		campo.value = "";
	}
}

function escrever(campo){
	if (campo.value == ""){
		campo.value = campo.defaultValue;
	}
}
</script>

Como ficará no campo de texto:

<input type="text" name="nome_campo" id="nome_campo" value="Clique Aqui para o texto sair!" onfocus="limpar(this);" onblur="escrever(this);" />

Veja o Script rodando: CLIQUE AQUI

Agência OFF, desenvolvimento de soluções web para as Agências Digitais


por Ted k' |
12 Comentários |
HTML, JavaScript / Ajax / DHTML

12 Respostas para Trocando o texto quando dar foco em campo

  1. André D. Molin 21/10/2009 at 6:18 PM | Permalink |

    Muito útil esta técnica. Clap’s!

  2. Ted k' 26/10/2009 at 12:55 PM | Permalink |

    É um método simples, mais pouca gente não usa, e é bom que em um site, tira aquele lance de “nome do campo: campo de texto”.

  3. Tiago Celestino 28/10/2009 at 4:04 PM | Permalink |

    Acabei de fazer uma solução com o jQuery. Qual a diferença? Nenhuma, só não preciso passar “onblur” e o “onfocus” direto no campo. Pelo menos, eu acho que tem mais controle. Olha ai oh

    $(document).ready(function(){

    $("input[type='text']").focus(function() {
    if($(this).val() == 'campo')
    $(this).val("");
    });

    $("input[type='text']").blur(function() {
    if($(this).val() == '')
    $(this).val("campo");
    });

    });

    Caso queria usar apenas em uma lugar especifico, pode colocar o id (#) ou usar uma class (.)

    Vamos que vamos Tedório.

  4. Ted k' 28/10/2009 at 6:13 PM | Permalink |

    A diferença é que você vai ter que carregar o jquery para fazer uma coisa simples podendo usar javascript puro, processamento mais ágil.

  5. Carlos Rocha 14/12/2009 at 4:36 PM | Permalink |

    Tem um erro na função escrever você escreveu campocampo.value

    Muito boa sua dica!!

    Abraços

  6. Ted k' 14/12/2009 at 4:58 PM | Permalink |

    Não entendo, mais foi o próprio wordpress que duplicou!

  7. Vinicius 12/06/2010 at 3:13 AM | Permalink |

    Ted, qual a forma de usar seu script de forma não obstrusiva, mesmo que seja com jquery?

    Tentei o código do Tiago Celestino, mas não deu certo.

    O código abaixo funciona muito bem mas apenas para text fields. Preciso para ambos textfields e textareas.

    <!–
    function init(){
    var inp=document.getElementsByTagName(‘input’);
    for(var i=0;i

  8. Vinicius 12/06/2010 at 3:16 AM | Permalink |

    Ops, o código ficou pela metade.
    Acesse aqui:
    http://pastry.se/735001/

  9. Vinicius 12/06/2010 at 3:22 AM | Permalink |

    Outra coisa que estou tentando é combinar o script acima com as máscaras que você sugeriu aqui:

    http://tedk.com.br/blog/index.php/2009/09/26/mascara-em-campos-com-jquery/

    Mãs não funciona. O que você recomenda?

    Obrigado

  10. Tiago Celestino 06/08/2010 at 4:01 PM | Permalink |

    @Vinicius, tinha um erro no código, mas ajeitei.

    Dá uma olhada aqui no código final: http://snipplr.com/view/38655/using-focus-and-blur-on-input-with-jquery/

  11. Ted k' 06/08/2010 at 5:00 PM | Permalink |

    O amigo Celestino ajudando em todas!

  12. @ZeLuizR 24/08/2010 at 10:04 AM | Permalink |

    Fala ai Ted k’,

    Muito bom cara…
    eu só chamei ele via jQuery, mais funcionou muito bem.

    Segue o cod. abaixo:

    $(“.limpaPreenche”).focus(function(){
    limpar(this);
    });

    $(“.limpaPreenche”).blur(function(){
    escrever(this);
    });

    Vlw,

Deixe seu Comentário