Как поместить курсор (автофокус) в текстовое поле, когда страница загружается без поддержки javascript?

89

У меня есть форма с некоторыми текстовыми полями, и я хочу поместить курсор (автофокус) в первое текстовое поле формы при загрузке страницы.

Я хочу сделать это без использования javascript.

css html Тавамани Каси
источник
1
<input.... tabindex="1" />
Abhitalks 05

Ответы:

146

Я могу обойтись без поддержки javascript ..
Мы можем использовать атрибут автофокуса html5
Например: 

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

Если его использовать (autofocus = "autofocus") в текстовом поле, это означает, что текстовое поле будет сфокусировано при загрузке страницы. Подробнее:
http://www.hscripts.com/tutorials/html5/autofocus-attribute.html

Тавамани
источник
6
Соответствующий регистр букв - это автофокус для JSX / React.
thadk 02
37

Просто добавьте autofocusпервый ввод или текстовое поле.

<input type="text" name="name" id="xax" autofocus="autofocus" />
Раджникант Какадия
источник
1
По крайней мере в Хроме autofocusне работает, но autofocus="autofocus"работает.
Джей Салливан
4

Это будет работать:

OnLoad="document.myform.mytextfield.focus();"
Vishal
источник
3
@putvande - в заголовке написано «с использованием javascript», поэтому дайте ему перерыв.
Tomer
Он сказал без поддержки JavaScript.
Алехандро Нава
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
источник
OP сказал «без javascript».
Etienne Miret
1

Расширение для тех, кто немного повозился, как я.

Следующая работа (из W3):

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

Однако важно отметить, что в CSS это не работает. Т.е. нельзя использовать:

.first-input {
    autofocus:"autofocus"
}

По крайней мере, у меня это не сработало ...

AER
источник
-5

Иногда все, что вам нужно сделать, чтобы убедиться, что курсор находится внутри текстового поля, - это: щелкнуть текстовое поле и, когда отобразится меню, щелкнуть «Форматировать текстовое поле», затем щелкнуть вкладку «текстовое поле» и, наконец, изменить все четыре поля (левое, правое, верхнее и нижнее), перемещая стрелку вниз, пока на каждом поле не появится «0».

Марисела Сайнс
источник