Как поместить курсор (автофокус) в текстовое поле, когда страница загружается без поддержки 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».

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