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?

— 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

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