Colocar o Foco no Primeiro Campo da Página (input type=’text’)

22 03 2008

Reza a lenda que um desenvolvedor que preze pela usabilidade em suas aplicações deve se atentar aos detalhes. E muitas vezes um único detalhe aumenta consideravelmente a usabilidade geral da aplicação. Um bom exemplo deste fato é setar o foco no primeiro campo input do formulário da página.

Existe diversas formas de setar o foco no primeiro input de uma página,  usando o prototype existe a função Form.focusFirstElement(), porém em algumas situações o primeiro input da página não é o input que você gostaria que fosse setado o foco, por exemplo, Suponha que sua aplicação possua um campo input que sempre aparece no topo de todas as página, usando a função anteriormente citada o foco sempre será setado para este campo, uma solução é implementar um função similar ao focusFirstElement, segue a função implementada usando prototype que faz isso.

Event.observe(window, 'load', function() {
   var campos = $$("input[type='text']");
   if (campos.size() > 0){
      if(campos[0].id == "idDoCampoDeBusca"){
         campos[1].focus();
      } else {
         campos[0].focus();
      }
   }
});

Por padrão o foco será setado no primeiro input exceto quando o id do campo[0] for o seu famigerado campo de busca, é isso ai e tenham todos uma boa pásco, eu vou em borra!

[]’s Anselmo Battisti

Anúncios

Ações

Information

One response

5 10 2011
Lázaro Melo

parabéns pelo post, bacana e funciona.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: