2009-10-20 11 views
186

Esto es probablemente muy simple, pero ¿podría alguien decirme cómo hacer que el cursor parpadee en un cuadro de texto al cargar la página?¿Cómo centrarse en un campo de texto de entrada de formulario en la carga de página usando jQuery?

+81

No nos importa aquí preguntas sencillas. – DOK

+0

Verifique la respuesta de sohail arif en el siguiente enlace: http://stackoverflow.com/questions/18054459/how-to-place-the-cursor-auto-focus-in-text-box-when-a-page-gets- cargado-sin –

Respuesta

292

establecer el foco en el primer campo de texto:

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

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

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

O bien, puede utilizar el ID:

$("#someTextBox").focus(); 
+15

"Cómo ... usar Jquery **" – pjmil

+2

Si utiliza un cuadro de diálogo, consulte esta respuesta si lo anterior no funciona http://stackoverflow.com/a/20629541/966609 –

+1

'$ ('entrada [ type = "text"] '). get (0) .focus(); 'funcionó para mí – Rav

24

Claro:

<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> 
11

HTML:

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

jQuery:

$("#search").focus(); 
+0

si usa html5, solo agrega el atributo 'autofocus' al elemento de entrada? –

15

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

Se puede comprobar esto mediante la adición de onfocus atributos en cada uno de sus <input> elementos para registrar si el usuario ya ha centrado en un campo de formulario y luego no robar el foco si tienen:

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"> 
+0

gracias por esto. esta es una buena adición! – chris

+1

Su perspectiva no solo es técnicamente correcta, sino que su consideración por el mejor UX posible es exquisita. ¡Bravo! – Maviza101

7

Lo siento por chocando una vieja pregunta. Encontré esto vía google.

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

por ejemplo.

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

Esto se desarrollará la primera entrada o área de texto que encuentra, y por supuesto usted puede agregar otros selectores en la mezcla también. Hnady si no puede estar seguro de que un tipo de elemento específico sea el primero, o si quiere algo un poco general/reutilizable.

+0

Excelente sugerencia @Andrew. – DOK

3

lugar después de la entrada

<script type="text/javascript">document.formname.inputname.focus();</script> 
16

Por qué está todo el mundo usando jQuery para algo simple como esto.

<body OnLoad="document.myform.mytextfield.focus();"> 
+1

+1 ¡La manera más simple! –

+2

Porque la pregunta está etiquetada como jQuery. –

4

Esto es lo que yo prefiero usar:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#fieldID").focus(); 
    }); 
</script> 
+1

Es una mala manera de hacer las cosas, centrarse en un en la carga de documentos, simplemente use el atributo 'autofocus' provisto por HTML5 – OverCoder

62

Se puede utilizar para este HTML5 autofocus. No necesita jQuery u otro JavaScript.

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

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

+0

autofocus no funciona en IE11 https://stackoverflow.com/questions/34068302/autofocus-attribute -on-input-field-not-working-in-ie-11 –

0

La manera más simple y más fácil de lograrlo

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