"Thứ tự tab" trong ứng dụng đường ray

Question

Trong ứng dụng đường ray, tôi muốn người dùng có thể nhập dữ liệu mà không phải sử dụng chuột.

Để thực hiện việc này, tôi muốn đặt thứ tự con trỏ di chuyển đến trường văn bản, hộp thả xuống và nút.

Có cách nào để thực hiện việc này không?

Answer 1

Tôi chưa thử làm điều này (nhưng có lẽ tôi nên làm). Nhưng dù sao, w3.org có điều này: http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-keyboard-access mô tả ngắn gọn việc sử dụng thuộc tính tabindex. Tôi tưởng tượng bạn sẽ phải đặt nó một cách riêng lẻ trên các điều khiển của bạn, điều đó sẽ hơi mệt mỏi, nhưng không phải là khủng khiếp như vậy.

Tôi không biết liệu nó có hoạt động hay không, nhưng bạn có thể cân nhắc sử dụng số gia, ví dụ, 100 để bổ sung giữa các điều khiển hiện có mà không cần phải kiểm tra lại toàn bộ danh sách điều khiển.

Answer 2

Tôi không phải là một anh chàng đường ray, nhưng tôi đã sử dụng các khung công tác MVC-ish web khác. Chỉ cần báo trước :)

Khi bạn xuất các phần tử biểu mẫu, bạn sẽ có thể thêm các thuộc tính bổ sung cho từng phần tử (chẳng hạn như lớp, onchange, v.v.). Bạn có thể thực hiện những gì bạn muốn bằng cách thiết lập giá trị tabindex cho mỗi giá trị, tăng giá trị khi bạn thực hiện. Html kết quả sẽ trông giống như sau:

<input type="text" id="myInput" tabindex=1 /> 
<select id="mySelect" tabIndex=2> 
    <option id="myOpt1" value="someValue">Foo!</option> 
</select> 

Điều gì đó tương tự sẽ hoạt động.

Ngoài ra, nó trông giống như this question has already been posted :)

Answer 3

tôi chắc chắn không phải là 100% nhưng tôi cho rằng bạn có thể kiểm soát các chức năng Tab để quản lý bản thân đơn đặt hàng.

Trong mã giả mà có thể làm một cái gì đó như thế

all_fields = ["field1","field2"] 
current = 0 
if catch event("tab pressed"){ 
current = (current+1) %all_fields.size 
all_fields[current].focus 
} 

Khi phần tử được chọn bằng cách sử dụng bàn phím, bạn có thể gõ bất cứ điều gì hoặc sử dụng các mũi tên để duyệt một trình đơn thả xuống.

Bạn cũng có thể sử dụng tabindex http://www.w3.org/TR/html401/interact/forms.html nhưng tôi chưa bao giờ làm điều đó vì vậy tôi không chắc liệu nó có hoạt động tốt hay không.

Giải pháp cuối cùng là đặt các trường theo thứ tự bạn muốn mọi người chỉnh sửa chúng.

Answer 4

<%= f.text_field :attribute, :tabindex => 1 %> 

sau đó 2, 3, 4, vv

Edit: gạch Removed từ "tab_index". Rất gần.

Ngoài ra, bạn có thể làm cho một phương pháp helper để tự động tăng chỉ số:

def tabindex 
    @tabindex ||= 0 
    @tabindex += 1 
end 

Answer 5

Jeff Peterson là gần như ngay.

<%= f.text_field :attribute, :tabindex => 1 %> 

Answer 6

Nếu bạn đang sử dụng simple_form bạn sẽ cần phải làm điều đó như vậy:

<%= f.input :name, input_html: {:tabindex => 1} %>