cách đặt thứ tự tab trong jquery

Question

Tôi đang sử dụng các điều khiển Telerik, cụ thể là hộp văn bản số nơi bạn có thể đặt mũi tên lên xuống để tăng/giảm giá trị trong hộp văn bản. Tôi bắt buộc phải đặt thứ tự tab để chuyển sang trường tiếp theo nhưng vì có nút trên mũi tên lên xuống, trình duyệt sẽ đi qua các nút đó trước rồi chuyển sang trường hộp văn bản tiếp theo.

Làm cách nào để đặt jquery để phát hiện trường nhập văn bản/hộp thả xuống/etc có thể nhìn thấy tiếp theo và di chuyển đến đó khi nhấn nút tab thay vì chạy qua các nút gần đó?

Answer 1

Bạn thực sự thiết lập điều này với thuộc tính HTML tabindex được sắp xếp tăng dần về số lượng cho tất cả các yếu tố đầu vào trên trang. Vì vậy, để bỏ qua các nút, hãy bắt đầu với đầu vào đầu tiên trên trang gán cho nó tabindex=1, số thứ hai tabindex=2, đặt các đầu vào tiếp theo cho phù hợp. Khi bạn nhận được các nút mà bạn muốn bỏ qua chỉ đơn giản là không cung cấp cho họ một giá trị tabindex, hoặc cung cấp cho họ các chỉ số ở cuối danh sách.

Answer 2

$(function() { 
    var tabindex = 1; 
    $('input,select').each(function() { 
    if (this.type != "hidden") { 
     var $input = $(this); 
     $input.attr("tabindex", tabindex); 
     tabindex++; 
    } 
    }); 
}); 

Answer 3

Bạn cũng có thể thử này

$('input,select :visible').each(function (i) { $(this).attr('tabindex', i + 1); }); 

Answer 4

Đôi khi bạn đang tạo ra mã hoặc sắp xếp lại các yếu tố với jQuery giải pháp là không sử dụng taborder nhưng chỉ cần chắc chắn rằng bạn đặt các yếu tố trong DOM trong đúng thứ tự. Xem ví dụ bên dưới.

JQuery code:: 
var anchorB = jQuery('#anchorB'); 
jQuery('#divB').remove(); 
anchorB.insertBefore("#anchorC"); 


Before:: 
<a id="anchorB" href="#">Anchor B</a> 
<a id="anchorA" href="#">Anchor A</a> 
<a id="anchorC" href="#">Anchor C</a> 

After:: 
<a id="anchorA" href="#">Anchor A</a> 
<a id="anchorB" href="#">Anchor B</a> 
<a id="anchorC" href="#">Anchor C</a>