Có bộ chọn jQuery để nhận tất cả các phần tử có thể lấy tiêu điểm không?

Question

This answer cho biết yếu tố HTML nào có thể nhận tiêu điểm. Có một bộ chọn jQuery khớp chính xác với các phần tử này không?

Hiện tại tôi chỉ đang sử dụng $('input,select,textarea,a'), nhưng tôi tự hỏi liệu có điều gì chính xác hơn không.

Answer 1

Bạn có thể kiểm tra các yếu tố có focus() chức năng:

$('*').each(function() { 
    if(typeof this.focus == 'function') { 
    // Do something with this element 
    } 
}) ; 

Sửa Suy nghĩ nhiều hơn một chút, nó có lẽ sẽ làm cho tinh thần để có *:visible thay vì chỉ * như chọn cho hầu hết các ứng dụng của điều này.

Answer 2

Từ other SO answer referred to by the OP:

trình duyệt ngày nay xác định trọng tâm() trên phần tử html, ...

Vì vậy, điều này có nghĩa thử nghiệm cho focus như một thành viên của nguyên tố này là không hiệu quả , bởi vì tất cả các yếu tố sẽ có, bất kể chúng có thực sự chấp nhận tiêu điểm hay không.

... nhưng một phần tử sẽ không thực sự mất tập trung trừ khi đó là một trong:

• HTMLAnchorElement/HTMLAreaElement với một href * HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement nhưng không phải với disabled (IE thực sự cung cấp cho bạn một lỗi nếu bạn cố gắng), và các tệp tải lên có hành vi bất thường vì lý do bảo mật
• HTMLIFrameElement (mặc dù tập trung vào nó không làm gì hữu ích). Các yếu tố nhúng khác cũng có thể, tôi chưa thử nghiệm tất cả.
• Bất kỳ phần tử với một tabindex

Vì vậy, những gì về cách đặt tên tất cả những người rõ ràng trong một jQuery Selector?

$('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]') 

---

Update # 1:

tôi updated your jsFiddle here. Dường như nó hoạt động.

Tôi cũng đã thêm các phần tử có thuộc tính contenteditable vào danh sách ở trên.

---

Update # 2:

Như @ jfriend00 chỉ ra, "Tùy thuộc vào việc sử dụng, người ta có thể muốn lọc ra các yếu tố mà không phải là có thể nhìn thấy". Để thực hiện điều này, chỉ cần áp dụng .filter(':visible') cho bộ được tạo từ bộ chọn ở trên.

---

Update # 3:

Như Xavin pointed out: jQuery UI bây giờ có một selector, :focusable, mà thực hiện chức năng này. Nếu bạn đã sử dụng jQuery UI, đây có thể là cách để đi. Nếu không, bạn có thể muốn check out how jQuery UI does it. Trong mọi trường hợp, mô tả trên trang jQuery UI cho :focusable là hữu ích:

Các yếu tố của các loại sau đây là có thể đặt tiêu nếu họ không bị khuyết tật: input, select, textarea, nút, và đối tượng. Neo là có thể tập trung nếu chúng có một href hoặc thuộc tính tabindex. các phần tử vùng có thể tập trung nếu chúng nằm trong một bản đồ có tên, có thuộc tính href và có một hình ảnh hiển thị bằng bản đồ. Tất cả các yếu tố khác đều có thể tập trung chỉ dựa trên thuộc tính và khả năng hiển thị tabindex của chúng.

Vì vậy, bộ chọn tôi đề xuất ở trên gần nhưng không tính đến một vài sắc thái.

Đây là chức năng tách từ giao diện người dùng jQuery, với các chỉnh sửa nhỏ để làm cho nó độc lập. (các bản chỉnh sửa chưa được kiểm tra, nhưng nên hoạt động):

function focusable(element) { 
    var map, mapName, img, 
     nodeName = element.nodeName.toLowerCase(), 
     isTabIndexNotNaN = !isNaN($.attr(element, "tabindex")); 
    if ("area" === nodeName) { 
     map = element.parentNode; 
     mapName = map.name; 
     if (!element.href || !mapName || map.nodeName.toLowerCase() !== "map") { 
      return false; 
     } 
     img = $("img[usemap=#" + mapName + "]")[0]; 
     return !!img && visible(img); 
    } 
    return (/input|select|textarea|button|object/.test(nodeName) ? 
     !element.disabled : 
     "a" === nodeName ? 
      element.href || isTabIndexNotNaN : 
      isTabIndexNotNaN) && 
     // the element and all of its ancestors must be visible 
     visible(element); 

    function visible(element) { 
     return $.expr.filters.visible(element) && 
     !$(element).parents().addBack().filter(function() { 
      return $.css(this, "visibility") === "hidden"; 
     }).length; 
    } 
} 

Lưu ý: chức năng trên vẫn phụ thuộc vào jQuery, nhưng không yêu cầu jQuery UI.

Answer 3

Kiểm tra chung để biết liệu yếu tố có hỗ trợ một loại người nghe cụ thể hay không là để xem liệu phần tử đó có thuộc tính liên quan hay không, ví dụ: để kiểm tra hỗ trợ cho các tập trung sự kiện, sử dụng:

if ('focus' in element) { 
    // element supports the focus event 
} 

Tuy nhiên, có một số trường hợp ngoại lệ. Xem câu trả lời cho How do you programmatically determine to which events an HTML object can listen for?.

Answer 4

Thay vì nhận danh sách các yếu tố có thể đặt tiêu điểm, bạn có thể thử thiết lập trình xử lý tiêu điểm ở phần body để nắm bắt các sự kiện trọng tâm.

$(document.body).on("focus", "*", function(e) { 
    //Scroll to e.target 
}); 

Answer 5

Trong jQuery không tồn tại bộ chọn bạn đang tìm kiếm.

Nếu bạn đã sử dụng jQueryUI, bạn có thể sử dụng bộ chọn :focusable.

http://api.jqueryui.com/focusable-selector/

Answer 6

Một đơn giản, nhưng đầy đủ, jQuery selector có thể là một điều này:

$('a[href], area[href], input, select, textarea, button, iframe, object, embed, *[tabindex], *[contenteditable]') 
.not('[tabindex=-1], [disabled], :hidden') 

Answer 7

tôi có một giải pháp tương đối đơn giản mà trả về tất cả trẻ em tabbable, theo thứ tự tab của họ, mà không sử dụng jQuery.

function tabbable(el) { 
    return [].map.call(el.querySelectorAll([ 
     'input', 
     'select', 
     'a[href]', 
     'textarea', 
     'button', 
     '[tabindex]' 
    ]), function(el, i) { return { el, i } }). 
     filter(function(e) { 
      return e.el.tabIndex >= 0 && !e.el.disabled && e.el.offsetParent; }). 
     sort(function(a,b) { 
      return a.el.tabIndex === b.el.tabIndex ? a.i - b.i : (a.el.tabIndex || 9E9) - (b.el.tabIndex || 9E9); }); 
} 

Đối với IE, hãy xem xét triển khai kiểm tra mức độ hiển thị khác với e.el.offsetParent. jQuery có thể giúp bạn ở đây.

Nếu bạn không cần các yếu tố được sắp xếp, hãy thoát khỏi cuộc gọi đến sort().