Lấy nét mẫu html mặc định không có JavaScript

159

Có thể đặt tiêu điểm đầu vào mặc định trên một biểu mẫu HTML mà không cần sử dụng JavaScript, ví dụ:

<html>
  <form>
    Input 1: <input type="text" name="textbox1"/>
    <br/>
    Input 2: <input type="text" name="textbox2"/>
  </form>
</html>

Tôi muốn đặt tiêu điểm mặc định thành một trong các hộp văn bản khi biểu mẫu tải mà không sử dụng JavaScript (vì tôi muốn hành vi xảy ra khi người dùng bị tắt js).

html accessibility

— Adam Jenkin
nguồn

292

Bạn có thể làm điều đó trong HTML5, nhưng nếu không, bạn phải sử dụng JavaScript.

HTML5 cho phép bạn thêm autofocusvào phần tử biểu mẫu của mình, ví dụ:

<input type="text" name="myInput" autofocus />

Điều này không hoạt động trong các trình duyệt hỗ trợ HTML5 (Hay đúng hơn là các trình duyệt hỗ trợ phần đặc biệt này của HTML5) nhưng như bạn biết, không phải ai cũng có thể sử dụng nó.

— Jake Lucas
nguồn

22

Cần lưu ý điều gì đó ... nếu bạn đặt thành phần biểu mẫu tập trung, thì bất kỳ ai sử dụng Công nghệ hỗ trợ (AT) như trình đọc màn hình sẽ cần sao lưu để xem menu và bất kỳ nội dung nào khác trước trường tập trung.

Theo tôi, một phương pháp ưa thích là không đặt tiêu điểm vào bất kỳ trường nào, ngoại trừ liên kết bỏ qua nếu có sẵn. Điều đó cho họ tùy chọn bỏ qua nội dung trang hoặc đọc trang từ trên xuống.

— Greg
nguồn

Thêm một liên kết bỏ qua cũng bị ẩn trực quan, nhưng có thể truy cập thông qua trình đọc màn hình sẽ rất tuyệt!

— James Cazzetta

Tôi có rất nhiều điều để tìm hiểu về khả năng tiếp cận. Cảm ơn bạn đã thêm câu trả lời này để giúp phần còn lại của chúng tôi tìm hiểu!

— Andrew Steitz

3

Như những người khác đã nói, không có Javascript, bạn không thể đảm bảo trường mặc định. Một tùy chọn thay thế bạn có thể muốn thử, nếu bạn có nhiều trường mà người dùng có thể muốn truy cập đang sử dụngaccesskey thuộc tính. Điều này về cơ bản có nghĩa là người dùng có thể quay lại một trong hai trường ngay sau khi duyệt, điều này có thể hữu ích cho người dùng trình đọc màn hình, v.v ...

Bài viết Wikipedias về chủ đề này khá hữu ích - http://en.wikipedia.org/wiki/Access_key

0

Điều này là không thể nếu không có một số hình thức kịch bản. Ngay cả trang chủ của Google cũng yêu cầu Javascript để tập trung vào trường tìm kiếm.

— Evan Mulawski
nguồn

1

Nó là. Google chỉ thêm javascript cho những trình duyệt không hỗ trợ HTML5. Một cái gì đó đáng xem xét trong bất kỳ ứng dụng.

— mvbrakel

-8

Bạn có thể sử dụng tabindex thuộc tính và sử dụng giá trị thấp nhất trên hộp văn bản mặc định. Kiểm tra tại đây để được hỗ trợ trình duyệt:

http://reference.sitepoint.com/html/object/tabindex#compabilitiessection

Trang web cho thấy rằng

(trong hầu hết các trường hợp khác, đặc biệt là các điều khiển và liên kết của biểu mẫu, trong đó, tabindex có hỗ trợ tuyệt vời)

— Cahit
nguồn

3

Thuộc tính "tabindex" không lấy nét tự động cho bất kỳ phần tử nào, thậm chí không phải là phần tử có "tabindex = 1". Nhấn <tab> (hoặc nhấp chuột) là bắt buộc để tập trung vào phần tử đầu tiên trong chuỗi tab.

— Clint Pachl