JavaScript: Setando o foco em um campo

Na maior parte dos sites desenvolvidos sempre tem uma página de contato com um formulário a ser preenchido. E quando acessamos este tipo de página queremos logo preenchê-lo. Porém, muitos sites não deixam o foco no campo, quero dizer, o cursor piscando.

Então, para resolver este problema e para agilizar o trabalho de quem chega em seus sites, basta seguir os passos abaixo:

1. Toda página de contato submite os seus dados preenchidos para o servidor. Para que isto ocorra, o primeiro passo é criar a Tag <FORM>.

Sintaxe Básica:

<FORM ACTION=”url” METHOD=”GET ou POST”>

Podemos incluir eventos e outros atributos para a Tag <FORM>.

A Tag <FORM> pode conter vários inputs, tipo caixa de seleção (checkbox), botão de rário (radio), botão de envio de dados (submit), entrada de texto (text), entrada de senhas (password) e muito mais.

Exemplo:

<form action="enviar_dados.php" method="post" name="frmEnviaDados">
    <input maxlength="20" name="txtnome" size="20" type="text" />
    <input maxlength="20" name="txtemail" size="20" type="text" />
</form>

2. Finalizando, estes códigos devem estar dentro das Tags <body> </body>.

Para que o foco apareça no campo de sua escolha, basta digitar o seguinte código:

<body onLoad=”document.frmEnviaDados.txtnome.focus();“>

–> separando as partes:

document: instância de um objeto que é criado todas vez que visualiza uma página HTML.

frmEnviaDados: é o nome dado ao formulário – valor do atributo “name”.

txtnome: nome dado ao campo que vai receber o foco. Refere-se ao campo onde o usuário vai digitar seu nome.

focus(): coloca o foco da página no campo de texto.

Até a próxima!

10 comentários em “JavaScript: Setando o foco em um campo

  • 7 de outubro de 2011 em 12:04
    Permalink

    Realmente fantástico … muito obrigado me ajudou muito

    Resposta
  • 12 de junho de 2012 em 10:37
    Permalink

    Muito bom, obrigado me ajudou bastante ..

    Resposta
  • 1 de novembro de 2012 em 10:13
    Permalink

    Só é possível usar o focus em um form? Não dá pra usá-lo fora dele?

    Resposta
    • 1 de novembro de 2012 em 15:00
      Permalink

      Fala Marcos,

      veja outra forma:

      <script type="text/javascript">
      function setFocus() {
        document.getElementById("foco").focus(); 
      }
      </script> 
      <body onLoad="setFocus()">
      <input type="text" name="foco" id="foco" />
      </body>
      Resposta
  • 2 de dezembro de 2012 em 17:51
    Permalink

    Chefe, tem como eu colocar o foco num type=”radio” ?

    Resposta
  • 20 de abril de 2013 em 13:37
    Permalink

    Podem fazer com jQuery $(“input[name=nm_local]”).focus();

    é só alterar o tipo e nome do campo.

    Resposta
  • 24 de setembro de 2013 em 14:28
    Permalink

    Valeu, muito bom mesmo!

    Resposta
  • 10 de fevereiro de 2014 em 20:41
    Permalink

    Valeu cara, era o que eu precisava;

    Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *