¿Cómo colocar el cursor (enfoque automático) en el cuadro de texto cuando se carga una página sin soporte JavaScript?

89

Tengo un formulario con algunos campos de texto y quiero colocar el cursor (enfoque automático) en el primer campo de texto del formulario cuando se carga la página.

Quiero hacerlo sin usar javascript.

css html Thavamani Kasi
fuente
1
<input.... tabindex="1" />
Abhitalks

Respuestas:

146

Ya es posible hacerlo sin el soporte de javascript ..
Podemos usar el atributo de enfoque automático html5
Por ejemplo: 

<input type="text" name="name" autofocus="autofocus" id="xax" />

Si lo usa (autofocus = "autofocus") en el campo de texto, significa que el campo de texto se enfoca cuando se carga la página. Para más detalles:
http://www.hscripts.com/tutorials/html5/autofocus-attribute.html

Thavamani
fuente
6
La capitalización adecuada es en realidad el enfoque automático para JSX / React.
Thadk
37

Simplemente agregue la autofocusprimera entrada o área de texto.

<input type="text" name="name" id="xax" autofocus="autofocus" />
Rajnikant Kakadiya
fuente
1
Al menos en Chrome, autofocusno funciona, pero autofocus="autofocus"funciona.
Jay Sullivan
4

Esto funcionará:

OnLoad="document.myform.mytextfield.focus();"
Vishal
fuente
3
@putvande: el título dice "usando javascript", así que dale un descanso.
Tomer
Dijo sin soporte de JavaScript.
Alejandro Nava
3 
<body onLoad="self.focus();document.formname.name.focus()" >

formname is <form action="xxx.php" method="POST" name="formname" >
and name is <input type="text" tabindex="1" name="name" />

it works for me, checked using IE and mozilla.
autofocus, somehow didn't work for me.
dewaz
fuente
El OP dijo "sin javascript".
Etienne Miret
1

Una expansión para aquellos que jugaron un poco como yo.

El siguiente trabajo (de W3):

<input type="text" autofocus />
<input type="text" autofocus="" />
<input type="text" autofocus="autofocus" />
<input type="text" autofocus="AuToFoCuS" />

Sin embargo, es importante tener en cuenta que esto no funciona en CSS. Es decir, no puedes usar:

.first-input {
    autofocus:"autofocus"
}

Al menos no funcionó para mí ...

AER
fuente
-5

A veces, todo lo que tiene que hacer para asegurarse de que el cursor esté dentro del cuadro de texto es: haga clic en el cuadro de texto y cuando se muestre un menú, haga clic en "Dar formato al cuadro de texto", luego haga clic en la pestaña "cuadro de texto" y finalmente modifique todo cuatro márgenes (izquierdo, derecho, superior e inferior) con las flechas hacia abajo hasta que aparezca "0" en cada margen.

Marisela Sainz
fuente