Làm cách nào để giới hạn chỉ mục tab chỉ với lớp phủ và các phần tử của nó

Tôi có một trang phức tạp với nhiều lớp phủ (loại hộp đèn) xuất hiện dựa trên các lựa chọn từ một số menu thả xuống. Điều này được thực hiện với jQuery. Mục đích là để giới hạn người dùng chỉ có thể tab qua các phần tử trên lớp phủ (div hộp đèn định vị trên) thông qua bàn phím. Nói cách khác, xóa các phần tử trang nằm bên dưới khỏi chuỗi tab.Làm cách nào để giới hạn chỉ mục tab chỉ với lớp phủ và các phần tử của nó

Tôi biết rằng tôi có thể đặt thuộc tính tabindex = "- 1" trên tất cả các phần tử nằm dưới đây bằng javascript hoặc jQuery, hoạt động nhưng có một nhược điểm lớn.

Vấn đề là dự án có thể yêu cầu một số yếu tố nằm bên dưới có chỉ mục tab cụ thể khác với chỉ mục tab trình duyệt mặc định. Nếu có bất kỳ thuộc tính chỉ mục tab hiện tại nào được đặt trên các phần tử nằm bên dưới, tôi sẽ mất chúng khi tôi đặt tất cả thành "-1".

Vì vậy, tôi tự hỏi nếu có một số cách khác để giới hạn chỉ mục tab chỉ là lớp phủ div, hoặc nếu có một cách tiếp cận khác tôi đã không nghĩ đến để giải quyết này? Bất kỳ sự trợ giúp nào cũng sẽ được đánh giá rất cao vì điều này đang giết thời gian sản xuất của tôi!

Nguồn

2012-07-05 user1505068

Xem câu trả lời của tôi [ở đây] (http://stackoverflow.com/questions/5206813/restrict-tabindex-focusing-to-a-section-of-the-page/5206844#5206844). – canon

Đây là giải pháp đơn giản cho vấn đề không yêu cầu sử dụng toàn cầu tabindex. (sử dụng jQuery). Tôi đã kiểm tra nó trong Firefox, Chrome, Safari, Opera và IE9, IE8 và IE7. Dường như hoạt động tốt.

function tabFocusRestrictor(lastItem,firstItem){ 
    $(lastItem).blur(function(){ 
     $(firstItem).focus(); 
    }); 
}

tabFocusRestrictor ('# clsButton', '# firstItemInSequence');

do đó các trường đầu vào html trên lớp phủ sẽ xấp xỉ như sau:

<form> 
    <input type="text" id="firstItemInSequence" /> 
    <input type="text" id="secondItemInSequence" /> 
    <input type="text" id="thirdItemInSequence" /> 
    <button id="clsButton">close</button> 
</form>

Điều này cho phép các nút hoạt động như bình thường, ngoại trừ trên mờ, chẳng hạn như khi bạn tab tắt của các nút, sau đó nó sẽ đưa bạn đến lĩnh vực đầu vào được chỉ định, trong trường hợp này là một trong đó có id của 'firstItemInSequence'.

Nguồn

2012-07-06 15:19:39 user1505068

sự kiện làm mờ sẽ không chỉ kích hoạt cho tab, tốt hơn là xử lý sự kiện nhấn phím tab và kiểm tra xem bạn có đang ở trên điều khiển đầu tiên/cuối cùng không. Xem các dòng 23-83 và 143-153 trong https://gist.github.com/0d04646ab6cf4df50610 –

Hãy nhớ đặt các điều khiển có liên quan để điều hướng ngược. Tính năng này hoạt động cho điều hướng chuyển tiếp, nhưng sẽ không thành công cho điều hướng chuyển tab. Cùng một mã mặc dù. – Joshua

Giải pháp rất đẹp. Nhưng Joshua khá đúng: đạp xe về phía trước cũng như ngược lại là tối thượng. –

Một giải pháp khác. Hàm này tập trung vào điều khiển với id = controlID sau khi nhấn phím TAB trong một điều khiển với tabIndex = maxindex. Điều này sẽ tạo ra một chuyển động tròn bằng cách nhấn TAB.

Nó sẽ được nằm ở:

<body class="body" onkeydown="return onKeyDownTab(event, 7,'txtName');"> 


function onKeyDownTab(event, maxIndex, controlFocusID) 
{ 

    var key = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode; 
    if (key == 9) 
    { 
     try 
     { 
      if (event.srcElement.id == "" || event.srcElement.className.indexOf("body") > -1) 
      { 
       document.getElementById(controlFocusID).focus(); 
       return false; 
      } 
      if (parseInt(event.srcElement.attributes.tabIndex.value) < 0 || parseInt(event.srcElement.attributes.tabIndex.value) >= maxIndex) 
      { 
       document.getElementById(controlFocusID).focus(); 
       return false; 
      } 
      return key; 
     } 
     catch (e) 
     { 
      return false; 
     }   
    } 
    else 
    { 
     return key; 
    } 
};

Nguồn

2013-01-24 19:44:37

Tôi nghĩ rằng jQuery plugin tôi tạo ra sẽ làm những gì bạn cần:

https://github.com/spirytoos/TABGuard

Tôi hy vọng nó giúp

Nguồn

2013-05-24 00:10:41 spirytus

xin lỗi, liên kết đã thay đổi, cập nhật câu trả lời ngay bây giờ – spirytus

jSFiDDLE

$(document).ready(function() { 
lastIndex = 0; 
$(document).keydown(function(e) { 
    if (e.keyCode == 9) var thisTab = $(":focus").attr("tabindex"); 
    if (e.keyCode == 9) { 
     if (e.shiftKey) { 
      //Focus previous input 
      if (thisTab == startIndex) { 
       $("#" + tabLimitInID).find('[tabindex=' + lastIndex + ']').focus(); 
       return false; 
      } 
     } else { 
      if (thisTab == lastIndex) { 
       $("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus(); 
       return false; 
      } 
     } 
    } 
}); 
var setTabindexLimit = function(x, fancyID) { 
     console.log(x); 
     startIndex = 1; 
     lastIndex = x; 
     tabLimitInID = fancyID; 
     $("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus(); 
    } 
/*Taking last tabindex=10 */ 
setTabindexLimit(10, "Selector_With_Where_Tab_Index_You_Want"); 
});

setTabindexLimit() chức năng hai thuộc tính đó là tabIndex cuối cùng trong Div và Selector_With_Where_Tab_Index_You_Want là lớp hoặc ID của div Trong đó bạn muốn tabindexto lặp lại.

Nguồn

2014-02-14 16:33:16

Làm cách nào để giới hạn chỉ mục tab chỉ với lớp phủ và các phần tử của nó

Trả lời

Các vấn đề liên quan