Há tempos queria escrever algo sobre recuperar o valor padrão de um campo de um formulário. Mas foi depois de ler o Leandro, em jQuery resetDefaultValue plugin, é que resolvi finalizar esse texto.

O que ele escreveu é exatamente o que irei escrever. Com uma diferença, a função - ou melhor, plugin - é destinada para quem utiliza a biblioteca JQuery.

Se você nem sabe o que é JQuery, seria interessante dar uma pesquisada. Mas caso queira apenas recuperar o valor padrão de um campo, pode continuar lendo.

A função é simples. Quando o usuário clica no campo, o valor padrão será apagado. Se ele digitar algo, muito bem, senão, quando ele sair do campo, o valor padrão deve retornar. Algo comum de acontecer em alguns campos de busca ou login de e-mail - como no do IG, por exemplo.

function returnDefaultValue() {
  // objeto de todos os elementos 'input'
  var elInput = document.getElementsByTagName("input");
  for(var x = 0; x < elInput.length; x++) {
    // objeto a ser trabalhado
    var obj = elInput[x];
    // se for um campo do tipo 'text' e tiver um valor padrão
    if(obj.type == "text" && obj.defaultValue != "") {
      // função que limpa o valor ao se clicar no campo
      obj.onclick = function() { this.value = ""; }

      // função que volta ao valor padrão
      obj.onblur = function() { if(this.value == "") this.value = this.defaultValue; }
    }
  }
}

Veja o código em ação

O ideal é chamar a função após o carregamento da página:

window.onload = returnDefaultValue;

Diferentemente da função do Leandro, essa só funciona com campos do tipo text.

A propriedade respopnsável por recuerar o valor padrão do campo é a [objeto].defaultValue.

Leitura recomendada: Javascript Form Object

Provavelmente você já precisou executar uma função mais de uma vez, durante um período de tempo ou esperar algum tempo para executá-la pelo menos uma vez.

Se você chegou a pesquisar, provavelmente leu algo sobre setTimeout() e setInterval(). Ambas são funções Javascript que controlam quando uma função deve ser chamada.

setTimeout([função], [tempo de espera, em milisegundos])

O setTimeout() executa a função passada por ele, após o tempo determinado, apenas uma vez. Exemplo:

setTimeout("alert('Olá, apareci depois de 3 segundos.')", 3000);

O código acima faz com que o alert seja executado apenas 3 segundo após a chamada.

setInterval([função], [tempo de repetição, em milisegundos]);

Diferentemente da setTimeout(), a função setInterval() executa repetidamente a função passada por ela, em intervalos de tempo iguais.

setInterval("alert('Olá, irei aparecer a cada 5 segundos.')", 5000);

O resultado será um alert a cada 5 segundos. Porém, em certos casos, isso pode ser um inconveniente. Por isso há o clearInterval(), que finaliza o intervalo entre as chamadas.

var num = 0;
objInter = setInterval(function() {
    if(num > 5)
    {
        clearInterval(objInter);
        return;
    }
    alert("Irei aparecer 5x apenas.");
    num++;
}, 5000);

Repare que o clearInterval() recebe como parâmetro o objeto do setInterval(), por isso é preciso guardar, em uma variável, esse objeto (no caso, a variável é objInter).

Obs.: Muita gente acha que o setTimeout() e o setInterval() interrompem a execução do código, como uma chamada de função, por exemplo. Isso não é verdade. As funções que serão executadas pelo setTimeout() e setInterval() são executadas por traz do código principal. Ou seja, não causam uma pausa.

Leitura recomendada:
Mozilla Developer Center: DOM:window.setTimeout
Mozilla Developer Center: DOM:window.setInterval
Mozilla Developer Center: DOM:window.clearInterval

Você tem todo o direto de usar Javascript para criar animações, validar dados ou melhorar a interação com o usuário. Porém, não pode obrigar o usuário a ter o Javascript ativado para acessar seu site.

Criar scripts em Javascript não-obstrutivo é, relativamente, simples.

Mas, o que seria um script não-obstrutivo? Scripts não-obstrutivos são Javascripts que apenas complementam uma determinada ação. Ou seja, se você não estiver com o javascript habilitado, você conseguirá realizar a determinada ação, mas de forma mais direta e menos interativa.

Vamos a um exemplo de script obstrutivo:

<a href="#" onclick="if(confirm('Tem certeza de que deseja sair dessa página?')) window.close();">Sair</a>

Caso o usuário não esteja com o javascript habilitado, o link do código acima não irá realizar nenhuma função, já que o href é apenas uma âncora para o nada.

Para transformar o código acima em um código não-obstrutivo, um simples link resolve o problema:

<a href="http://www.google.com/" onclick="if(confirm('Tem certeza de que deseja sair dessa página?')) window.close();" onkeypress="if(confirm('Tem certeza de que deseja sair dessa página?')) window.close();">Sair</a>

Agora, se o usuário não estiver com o javascript habilitado, ele será redirecionado para o site do Google.

[Atualizado em 20/04/08]
Perceba que, além de colocada o evento onclick, adicionei também o evento onkeypress. Recomenda-se fazer isso para os deficientes visuais, que utilizam o teclado para navegação, ao invés do mouse. O mesmo deve-se fazer para os demais eventos:

• Use “onmousedown” com “onkeydown”;
• Use “onmouseup” com “onkeyup”
• Use “onclick” com “onkeypress”

Fonte: A Bengala Legal
[/atualizado]

Claro que o exemplo acima é muito simples, mas em sua grande maioria, simples observações como essa já ajudam os usuários - principalmente os deficientes visuais - e robôs de busca.

Uma forma fácil de desenvolver scripts não-obstrutivos é, antes de tudo, fazer seu site rodar 100% sem Javascript. Para isso, esqueça as funções interativas e pense somente no HTML, CSS e alguma outra linguagem server-side, como o PHP, caso venha a ter que usar.

Quando tudo estiver certo, rodando numa boa, você começa a preparar os Javascripts para interagir com o usuário. Após ter criado todas as funções em Javascript, desative ele em seu browser - no Firefox você faz isso em Tools > Options… > Aba Content > Deixar desligado a opção Enable JavaScript facilmente com a extensão Web Developer - e comece a navegar pelo site.

Se você fez bem suas funções, você nem deve perceber que o Javascript está desabilitado, ou seja, você deve conseguir realizar todas as ações disponíveis em seu site - adicionar comentários, navegar pelo menu, ler notícias, enviar e-mail (em formulários de contato) - igualmente antes de criar as funções.

Com a febre do Ajax, muitos sites não permitem que você navegue por eles sem ter o Javascript. Além de ser ruim para os usuários que desejam navegar com ele desativado - seja por segurança, preferência pessoal ou restrições físicas do computador - é ruim também para o site, pois o Google e outros buscadores não conseguirão indexar o site.

Você já tentou acessar o Gmail sem Javascript? Se não, então tente. Você irá se surpreender. Tudo funciona. Não há algumas funcionalidades que a versão com Javascript tem, mas o básico - que é checar e-mail - funciona muito bem.