Làm cách nào để đặt con trỏ (tiêu điểm tự động) trong hộp văn bản khi một trang được tải mà không có hỗ trợ javascript?

89

Tôi có một biểu mẫu với một số trường văn bản và tôi muốn đặt con trỏ (tiêu điểm tự động) vào trường văn bản đầu tiên của biểu mẫu khi trang được tải.

Tôi muốn làm điều đó mà không cần sử dụng javascript.

css html

— Thavamani Kasi
nguồn

1

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

— Abhitalks

146

Có thể làm được điều đó mà không cần hỗ trợ javascript ..
Chúng ta có thể sử dụng thuộc tính tự động tiêu điểm html5.
Ví dụ:

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

Nếu sử dụng nó (autofocus = "autofocus") trong trường văn bản có nghĩa là trường văn bản được lấy tiêu điểm khi trang được tải .. Để biết thêm chi tiết:
http://www.hscripts.com/tutorials/html5/autofocus-attribute.html

— Thavamani
nguồn

6

Viết hoa thích hợp thực sự là Tự động lấy nét cho JSX / React.

— thadk

37

Chỉ cần thêm autofocusđầu vào đầu tiên hoặc vùng văn bản.

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

— Rajnikant Kakadiya
nguồn

1

Ít nhất là trong Chrome, autofocuskhông hoạt động, nhưng autofocus="autofocus"có.

— Jay Sullivan

4

Điều này sẽ hoạt động:

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

— Vishal
nguồn

3

@putvande - tiêu đề cho biết "sử dụng javascript", vì vậy hãy cho anh ấy nghỉ ngơi.

— Tomer

Anh ấy nói không có hỗ trợ 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
nguồn

OP nói "không có javascript".

— Etienne Miret

1

Một bản mở rộng dành cho những người đã từng loanh quanh như tôi.

Tác phẩm sau (từ W3):

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

Điều quan trọng cần lưu ý là điều này không hoạt động trong CSS. Tức là bạn không thể sử dụng:

.first-input {
    autofocus:"autofocus"
}

Ít nhất thì nó không hiệu quả với tôi ...

— AER
nguồn

-5

Đôi khi tất cả những gì bạn phải làm để đảm bảo con trỏ ở bên trong hộp văn bản là: nhấp vào hộp văn bản và khi một menu được hiển thị, hãy nhấp vào "Định dạng hộp văn bản" sau đó nhấp vào tab "hộp văn bản" và cuối cùng sửa đổi tất cả bốn lề (trái, phải, trên và dưới) bằng cách mũi tên xuống cho đến khi "0" xuất hiện trên mỗi lề.

— Marisela Sainz
nguồn