Як розташувати курсор (автофокус) у текстовому полі, коли сторінка завантажується без підтримки JavaScript?

89

У мене є форма з деякими текстовими полями, і я хочу розмістити курсор (автофокус) на першому текстовому полі форми, коли сторінка завантажується.

Я хочу зробити це без використання JavaScript.

css html

— Тавамані Касі
джерело

1

<input.... tabindex="1" />

— Абхіталкс

146

Я це можливо обійтися без підтримки JavaScript.
Ми можемо використовувати атрибут автофокусування html5
Наприклад:

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

Якщо використовувати його (автофокус = "автофокус") у текстовому полі, це означає, що текстове поле фокусується при завантаженні сторінки. Детальніше:
http://www.hscripts.com/tutorials/html5/autofocus-attribute.html

— Тавамані
джерело

6

Відповідною великою літерою є насправді автофокус для JSX / React.

— thadk

37

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

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

— Раджнікант Какадія
джерело

1

Принаймні в Chrome autofocusне працює, але autofocus="autofocus"працює.

— Джей Салліван,

4

Це буде працювати:

OnLoad="document.myform.mytextfield.focus();"

— Вішаль
джерело

3

@putvande - у назві написано "за допомогою javascript", тому дайте йому відпочити.

— Томер

Він сказав без підтримки 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.

— деваз
джерело

В ОП сказано "без javascript".

— Етьєн Мірет,

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».

— Марісела Сайнц
джерело