JavaScript define o foco para o elemento de formulário HTML

332

Eu tenho um formulário da web com uma caixa de texto. Como faço para definir o foco na caixa de texto por padrão?

Algo assim:

<body onload='setFocusToTextBox()'>

então alguém pode me ajudar com isso? Não sei como definir o foco na caixa de texto com JavaScript.

<script>
function setFocusToTextBox(){
//What to do here
}
</script>
javascript html textbox focus tenstar
fonte
21
Tão simples quanto document.getElementById('your_text_box_id').focus();.
Teemu

Respostas:

576

Faça isso.

Se o seu elemento é algo como isto ..

<input type="text" id="mytext"/>

Seu script seria

<script>
function setFocusToTextBox(){
    document.getElementById("mytext").focus();
}
</script>
mohkhan
fonte
3
Você precisaria digitalizar o documento usando outras partes da API da Web (por exemplo Document.forms, Document.getelementsByTagNameou Node.childNodes) e confiar em uma estrutura de documento conhecida ou procurar algumas propriedades específicas do elemento.
Peterph
40
Ou a resposta óbvia ... forneça um ID;) #
277 Relevant
4
Eu desaconselharia o uso de um ID porque ele está especificado em excesso. Em vez disso, use o nome ou mesmo uma classe. Nesse caso, você usaria document.querySelector ("[name = 'myText']") ou document.querySelector (". MyText") para obter uma referência ao elemento de entrada.
Chris Amor
12
@ChrisLove Conselho interessante. Por que ter um ID "superespecificado" e qual é exatamente o problema? É mais simples, mais preciso e o código para localizá-lo será um pouco mais rápido, com um ID. Parece a coisa mais óbvia e sensata a se fazer, para mim - se for possível.
PandaWood
4
@ChrisLove, isso não está exagerando a especificação de um seletor CSS, está definindo um atributo de ID HTML - a especificidade é um problema na maneira como o processamento CSS analisa seletores DOM, não um problema com o modo como os atributos de ID e classe funcionam em HTML. Não é aconselhável usar os mesmos seletores DOM para anexar CSS como é para anexar JS para, ou seja, você pode manter a diferenciação você descreve
Toni Leigh
142

Para o que vale a pena, você pode usar o autofocusatributo em navegadores compatíveis com HTML5. Funciona mesmo no IE a partir da versão 10.

<input name="myinput" value="whatever" autofocus />
um oliver melhor
fonte
51
Lembre-se de que isso só funciona para definir o foco quando a página é carregada pela primeira vez; não pode ser usado para definir o foco posteriormente em resposta à entrada.
Martin Carney
Estou atributo autofocus medo não é compatível se IOS Safari ( caniuse.com/#search=autofocus ), enquanto .focus () é apenas incompatível com o Opera Mini ( caniuse.com/#search=focus )
lfrodrigues
3
Observe que se você estiver tentando se concentrar no console, isso não será possível!
Ou Choban
65

Normalmente, quando nos concentramos em uma caixa de texto, também devemos rolar para a visualização

function setFocusToTextBox(){
    var textbox = document.getElementById("yourtextbox");
    textbox.focus();
    textbox.scrollIntoView();
}

Verifique se ajuda.

Khanh TO
fonte
2
Esta pode ser uma verdadeira dor de cabeça em uma tela menor se o campo é fora da tela :-)
Toni Leigh
Se você tiver uma barra de cabeçalho fixa, poderá ser necessário usar textbox.scrollIntoView (false), isso simplesmente define o elemento para a parte inferior em vez da parte superior.
DeadlyChambers
30

Se o seu código é:

<input type="text" id="mytext"/>

E se você estiver usando JQuery, também poderá usar:

<script>
function setFocusToTextBox(){
    $("#mytext").focus();
}
</script>

Lembre-se de que você deve desenhar a entrada primeiro $(document).ready()

Richard Rebeco
fonte
11
Eu diminuí a votação disso, porque remotamente não há implicações do jQuery na questão base. O OP queria ficar puramente javascript
Fallenreaper
11
Bem, você tem razão, eu errei, mas acho que é útil de qualquer maneira.
precisa
4
Estou votando nisso porque nos projetos em que o jQuery já está sendo usado e nos elementos como objetos de seleção do jQuery, é melhor ser consistente em vez de usar o vanilla JS.
paradite
8
Os Downvotes do @Fallenreaper são para egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect, de acordo com o centro de ajuda do stackoverflow. Acho que isso não chega nem perto dessas categorias. Ajudar não se limita ao OP, é?
Gellie Ann
@GellieAnn Embora seja uma resposta, ela está fora do escopo da pergunta dos OPs. Há uma razão pela qual ele está usando javascript vanilla e, embora você possa mencionar outras estruturas e fornecer ponteiros ou dicas para levá-la a uma, além de explicar o motivo, você ainda deve resolver a resposta dentro dos limites da pergunta. Portanto, eu mantenho meu voto negativo.
Fallenreaper
20

Para Javascript simples, tente o seguinte:

window.onload = function() {
  document.getElementById("TextBoxName").focus();
};
sipp
fonte
3

Eu costumava usar isso:

<html>
  <head>
    <script type="text/javascript">
      function focusFieldOne() {
        document.FormName.FieldName.focus();
      }
    </script>
  </head>

  <body onLoad="focusFieldOne();">
    <form name="FormName">
      Field <input type="text" name="FieldName">
    </form>
  </body>
</html>

Dito isto, você pode apenas usar o atributo foco automático no HTML 5.

Observação: eu queria atualizar esse tópico antigo, mostrando o exemplo solicitado e a atualização mais recente e fácil para aqueles que ainda estão lendo isso. ;)

RajnishCoder
fonte
1

Como mencionado anteriormente, document.forms também funciona.

function setFocusToTextBox( _element ) {
  document.forms[ 'myFormName' ].elements[ _element ].focus();
}

setFocusToTextBox( 0 );
// sets focus on first element of the form
Mac
fonte
AFAIK Form não tem atributo "name"
Marecky
Os formulários têm "nomes" há muito tempo e, no HTML5, ainda o fazem. Consulte w3.org/TR/html5/forms.html#the-form-element
Mac
1

Se o seu <input>ou <textarea>tiver atributo id=mytext, use

mytext.focus();

Mostrar snippet de código

Kamil Kiełczewski
fonte
0

window.onload é colocar o foco inicialmente onblur é colocar o foco enquanto você clica fora da área de texto, ou evita o desfoque da área de texto

    <textarea id="focus"></textarea>
    <script>
     var mytexarea=document.getElementById("focus");
    window.onload=function()
    {

    mytexarea.focus();

    }

mytextarea.onblur=function(){

mytextarea.focus();

}
    </script>
ßãlãjî
fonte