Hộp thoại Giao diện người dùng jQuery vô hiệu hóa tiêu điểm trên các đầu vào nền như thế nào?

Question

Khi bạn mở một hộp thoại phương thức bằng giao diện người dùng jQuery, bạn sẽ nhận thấy rằng nếu bạn sử dụng phím Tab, bạn có thể tập trung vào các nút của hộp thoại, nhưng bất kỳ đầu vào nào bên ngoài hộp thoại đều bị bỏ qua. Tôi đang cố gắng để đạt được hành vi tương tự này với jQuery UI Tools Overlay, nhưng tôi không chắc chắn cách jQuery UI đang làm điều đó. Nó dường như không được thiết lập chỉ mục tab của các yếu tố để -1, và bên cạnh đó, làm điều này sẽ rất tẻ nhạt vì nó sẽ liên quan đến việc tìm kiếm tất cả các yếu tố có thể tập trung mà không phải là một phần của hộp thoại. Điều này sẽ không tốt nếu bạn yêu cầu tự động hóa. Có cách nào để vô hiệu hóa tiêu điểm tất cả các phần tử của trang ngoại trừ một vài phần không?

Answer 1

Tiện ích hộp thoại thực sự xử lý sự kiện keypress và thực hiện chế độ xử lý khóa riêng của mình. Quá trình xử lý này bỏ qua các yếu tố tabbable bên ngoài hộp thoại.

Mã nguồn liên quan (dòng 286-305 trong current version at the time of this post) là:

// prevent tabbing out of modal dialogs 
if (options.modal) { 
    uiDialog.bind('keypress.ui-dialog', function(event) { 
     if (event.keyCode !== $.ui.keyCode.TAB) { 
      return; 
     } 

     var tabbables = $(':tabbable', this), 
      first = tabbables.filter(':first'), 
      last = tabbables.filter(':last'); 

     if (event.target === last[0] && !event.shiftKey) { 
      first.focus(1); 
      return false; 
     } else if (event.target === first[0] && event.shiftKey) { 
      last.focus(1); 
      return false; 
     } 
    }); 
} 

Lưu ý rằng bình luận TrueBlueAussie là chính xác, và rằng phiên bản của widget thoại sử dụng để liên kết với các trường hợp sai. keydown nên được sử dụng thay vì keypress:

uiDialog.bind('keydown.ui-dialog', function(event) { 
    // ... 
}); 

Answer 2

Dưới đây là đoạn code để xử lý này:

// prevent tabbing out of modal dialogs 
this._on(uiDialog, { 
    keydown: function(event) { 
     if (!options.modal || event.keyCode !== $.ui.keyCode.TAB) { 
      return; 
     } 
     var tabbables = $(":tabbable", uiDialog), 
      first = tabbables.filter(":first"), 
      last = tabbables.filter(":last"); 
     if (event.target === last[0] && !event.shiftKey) { 
      first.focus(1); 
      return false; 
     } else if (event.target === first[0] && event.shiftKey) { 
      last.focus(1); 
      return false; 
     } 
    } 
});​ 

Dường như jQuery UI cho biết thêm một bộ lọc (:tabbable) để động cơ selector jQuery và khi hộp thoại đang hoạt động, nó chỉ cho phép các tab để chu kỳ giữa các elet tabbable của phương thức.

Mã từ: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js