¿Cómo enfocarse en un campo de texto de entrada de formulario en la carga de página usando jQuery?

238

Probablemente esto sea muy simple, pero ¿alguien podría decirme cómo hacer que el cursor parpadee en un cuadro de texto al cargar la página?

javascript jquery html focus Chris
fuente
96
No nos importan las preguntas simples aquí.
DOK
Verifique la respuesta de sohail arif en el siguiente enlace: stackoverflow.com/questions/18054459/…
Sohail Arif

Respuestas:

378

Establezca el foco en el primer campo de texto:

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

Esto también hace el primer campo de texto, pero puede cambiar el [0] a otro índice:

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

O puede usar la ID:

$("#someTextBox").focus();
DOK
fuente
2
Si usa un cuadro de diálogo, consulte esta respuesta si lo anterior no funciona stackoverflow.com/a/20629541/966609
Matt Canty
1
$('input[type="text"]').get(0).focus(); ... funcionó para mí
Rav
92

Puedes usar HTML5autofocus para esto. No necesita jQuery u otro JavaScript.

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

Tenga en cuenta que esto no funcionará en IE9 y versiones inferiores.

Andrew Liu
fuente
El enfoque automático no funciona en IE11 ya sea stackoverflow.com/questions/34068302/…
BA TabNabber
Esto funciona para mi escenario, pero la respuesta seleccionada no lo hizo por alguna razón.
Vishnu YS
27

Por supuesto:

<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
fuente
2
Recomiendo traer el script después del elemento html.
Ali Sheikhpour
1
El script @AliSheikhpour está dentro del contenedor dom ready, por lo que no importa que esté antes del elemento html, pero de todos modos no debería estar en la cabeza.
Popnoodles
22

¿Por qué todos usan jQuery para algo tan simple como esto? 

<body OnLoad="document.myform.mytextfield.focus();">
TD_Nijboer
fuente
15
Porque la pregunta está etiquetada como jQuery.
Adarsh ​​Madrecha
18

Piense en su interfaz de usuario antes de hacer esto. Supongo (aunque ninguna de las respuestas lo ha dicho) que lo hará cuando el documento se cargue utilizando la ready()función de jQuery . Si un usuario ya se ha centrado en un elemento diferente antes de que se haya cargado el documento (lo cual es perfectamente posible), entonces es extremadamente irritante que le roben el foco.

Puede verificar esto agregando onfocusatributos en cada uno de sus <input>elementos para registrar si el usuario ya se ha enfocado en un campo de formulario y luego no robar el foco si tiene:

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
fuente
2
Su perspectiva no solo es técnicamente correcta, sino que su consideración por el mejor UX posible es exquisita. ¡Bravo!
Folusho Oladipo
12

HTML:

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

jQuery:

$("#search").focus();
Brendan
fuente
1
si usa html5, simplemente agregue el autofocusatributo al elemento de entrada?
Adarsh ​​Madrecha
¿Cómo se usa ese atributo, y se convertirá en el elemento enfocado tan pronto como aparezca su forma principal?
Khom Nazid
8

Perdón por toparse con una vieja pregunta. Encontré esto a través de google.

También vale la pena señalar que es posible usar más de un selector, por lo que puede apuntar a cualquier elemento de formulario, y no solo a un tipo específico.

p.ej.

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

Esto enfocará la primera entrada o área de texto que encuentre y, por supuesto, también puede agregar otros selectores a la mezcla. Hnady si no puede estar seguro de que un tipo de elemento específico es el primero, o si desea algo un poco general / reutilizable.

Andrew Calder
fuente
Excelente sugerencia @Andrew.
DOK
6

Esto es lo que prefiero usar:

<script type="text/javascript">
    $(document).ready(function () {
        $("#fieldID").focus(); 
    });
</script>
Poveilleux
fuente
3
Es una mala manera de hacer las cosas, enfocarse en un <input> en la carga de documentos, solo use el autofocusatributo proporcionado por HTML5
OverCoder
3

colocar después de la entrada

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

La forma más simple y fácil de lograr esto

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

La línea por $('#myTextBox').focus()sí sola no colocará el cursor en el cuadro de texto, en su lugar use:

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