¿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?

— 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

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