Olá pessoal,
muita gente já ouviu falar do atributo ‘placeholder’ inserido no HTML 5, ele é um excelente atributo e evita a utilização de javascript para um coisa simples (apagar o texto dos inputs).
A desvantagem é que nem todos os browsers aceitam esse atributo, bom, abaixo vou colocar uma função em jquery que fará com que o placeholder funcione em todos os browser.
$("input[type=text], textarea").live("focusin focusout", function(e) {
if(e.type == "focusin") {
if($(this).val() == $(this).attr("placeholder")) {
$(this).val("");
}
}
if(e.type == "focusout") {
if($(this).val() == "" || $(this).val() == $(this).attr("placeholder")) {
$(this).val($(this).attr("placeholder"));
}
}
});
o código acima zera o input/textarea caso ele seja igual ao valor inicial, se o input/textarea for vazio ele devolve o placeholder inicial.
abaixo o código HTML para o funcionamento do script
<input type="text" name="teste" placeholder="Insira um texto" value="Insira um texto" />
O atributo ‘value’ é obrigatório para o funcionamento da função, pois ele servirá para os browsers que não possuem suporte para o atributo placeholder executar a função.
OBS: o valor do atributo ‘value’ deve ser igual ao do ‘placeholder’.
abaixo o link com um exemplo
