Como se concentrar em um campo de texto de entrada de formulário no carregamento da página usando o jQuery?

238

Provavelmente isso é muito simples, mas alguém poderia me dizer como fazer o cursor piscar em uma caixa de texto no carregamento da página?

javascript jquery html focus chris
fonte
96
Não nos importamos com perguntas simples aqui.
DOK
Verifique a resposta de sohail arif no link abaixo: stackoverflow.com/questions/18054459/…
Sohail Arif

Respostas:

378

Defina o foco no primeiro campo de texto:

 $("input:text:visible:first").focus();

Isso também faz o primeiro campo de texto, mas você pode alterar o [0] para outro índice:

$('input[@type="text"]')[0].focus();

Ou você pode usar o ID:

$("#someTextBox").focus();
DOK
fonte
2
Se estiver usando um diálogo consulte esta resposta se o acima não está funcionando stackoverflow.com/a/20629541/966609
Matt Canty
1
$('input[type="text"]').get(0).focus(); ... trabalhou para mim
Rav
92

Você pode usar HTML5autofocus para isso. Você não precisa de jQuery ou outro JavaScript.

<input type="text" name="some_field" autofocus>

Observe que isso não funcionará no IE9 e inferior.

Andrew Liu
fonte
A focagem automática não funciona no IE11 quer stackoverflow.com/questions/34068302/...
BA TabNabber
Isso funciona para o meu cenário, mas a resposta selecionada não, por algum motivo.
Vishnu YS
27

Certo:

<head>
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#myTextBox").focus();
        });
    </script>
</head>
<body>
    <input type="text" id="myTextBox">
</body>
Pandincus
fonte
2
Eu recomendo trazer o script após o elemento html.
Ali Sheikhpour
1
O script @AliSheikhpour está dentro do wrapper dom, portanto, não importa que esteja antes do elemento html, mas não deve estar na cabeça de qualquer maneira.
Popnoodles
22

Por que todo mundo está usando o jQuery para algo simples como este. 

<body OnLoad="document.myform.mytextfield.focus();">
TD_Nijboer
fonte
15
Porque a pergunta está marcada como jQuery.
Adarsh ​​Madrecha
18

Pense na sua interface do usuário antes de fazer isso. Presumo (embora nenhuma das respostas tenha dito isso) que você fará isso quando o documento for carregado usando a ready()função do jQuery . Se um usuário já se concentrou em um elemento diferente antes do carregamento do documento (o que é perfeitamente possível), é extremamente irritante para ele ter o foco roubado.

Você pode verificar isso adicionando onfocusatributos em cada um dos seus <input>elementos para registrar se o usuário já se concentrou em um campo de formulário e, em seguida, não rouba o foco se tiver:

var anyFieldReceivedFocus = false;

function fieldReceivedFocus() {
    anyFieldReceivedFocus = true;
}

function focusFirstField() {
    if (!anyFieldReceivedFocus) {
        // Do jQuery focus stuff
    }
}


<input type="text" onfocus="fieldReceivedFocus()" name="one">
<input type="text" onfocus="fieldReceivedFocus()" name="two">
Tim Down
fonte
2
Sua perspectiva não é apenas tecnicamente correta, mas sua consideração pelo melhor UX possível é excelente. Bravo!
Folusho Oladipo 06/02
12

HTML:

  <input id="search" size="10" />

jQuery:

$("#search").focus();
brendan
fonte
1
se estiver usando html5, basta adicionar autofocusatributo ao elemento de entrada?
Adarsh ​​Madrecha
Como esse atributo é usado e se tornará o elemento focado assim que o formulário pai aparecer?
Khom Nazid 8/06/19
8

Desculpe por responder a uma pergunta antiga. Eu encontrei isso via google.

Também é importante notar que é possível usar mais de um seletor, portanto, você pode direcionar qualquer elemento do formulário, e não apenas um tipo específico.

por exemplo.

$('#myform input,#myform textarea').first().focus();

Isso focalizará a primeira entrada ou área de texto que encontrar e, é claro, você também pode adicionar outros seletores à mistura. Por isso, se você não pode ter certeza de que um tipo de elemento específico é o primeiro ou se deseja algo um pouco geral / reutilizável.

Andrew Calder
fonte
Excelente sugestão @Andrew.
DOK
6

Isto é o que eu prefiro usar:

<script type="text/javascript">
    $(document).ready(function () {
        $("#fieldID").focus(); 
    });
</script>
poveilleux
fonte
3
É ruim maneira de fazer as coisas, para se concentrar em um <input> na carga do documento, basta usar o autofocusatributo fornecido pelo HTML5
OverCoder
3

colocar após a entrada

<script type="text/javascript">document.formname.inputname.focus();</script>
Bill Marquis
fonte
0

A maneira mais simples e fácil de conseguir isso

$('#button').on('click', function () {
    $('.form-group input[type="text"]').attr('autofocus', 'true');
});
Muhammad Owais
fonte
0

A linha $('#myTextBox').focus()sozinha não colocará o cursor na caixa de texto; em vez disso, use:

$('#myTextBox:text:visible:first').focus();
David Sopko
fonte