jQuery UI Trộm cắp lấy nét

Question

Bất cứ khi nào tôi nhập nội dung nào đó vào đầu vào Chèn văn bản siêu kết nối sau, tất cả các từ sẽ chuyển sang textarea phía sau nó. Các nút OK và Cancel đang hoạt động tốt nhưng tôi không thể tập trung vào đầu vào văn bản.

Chúng tôi đang sử dụng jQuery UI 1.10.1. Nó hoạt động tốt với phiên bản trước của jQuery là 1.8.x.

Tôi đã kiểm tra mã sau của jQuery và nó có các phương pháp sau được gọi là khi mở một hộp thoại modal:

_focusTabbable: function() { 
    // Set focus to the first match: 
    // 1. First element inside the dialog matching [autofocus] 
    // 2. Tabbable element inside the content element 
    // 3. Tabbable element inside the buttonpane 
    // 4. The close button 
    // 5. The dialog itself 
    var hasFocus = this.element.find("[autofocus]"); 
    if (!hasFocus.length) { 
     hasFocus = this.element.find(":tabbable"); 
    } 
    if (!hasFocus.length) { 
     hasFocus = this.uiDialogButtonPane.find(":tabbable"); 
    } 
    if (!hasFocus.length) { 
     hasFocus = this.uiDialogTitlebarClose.filter(":tabbable"); 
    } 
    if (!hasFocus.length) { 
     hasFocus = this.uiDialog; 
    } 
    hasFocus.eq(0).focus(); 
}, 

_keepFocus: function (event) { 
    function checkFocus() { 
     var activeElement = this.document[0].activeElement, 
      isActive = this.uiDialog[0] === activeElement || 
       $.contains(this.uiDialog[0], activeElement); 
     if (!isActive) { 
      this._focusTabbable(); 
     } 
    } 
    event.preventDefault(); 
    checkFocus.call(this); 
    // support: IE 
    // IE <= 8 doesn't prevent moving focus even with event.preventDefault() 
    // so we check again later 
    this._delay(checkFocus); 
}, 

mà được lấy từ đây: http://code.jquery.com/ui/1.10.1/jquery-ui.js

Answer 1

Câu trả lời thứ hai Tôi đã tìm thấy rằng trong mã sau jQuery liên kết tài liệu với hộp thoại. Vì vậy, khi tôi unbind này khi tôi nhấp vào sự kiện nút mong muốn của onclick (hoặc bất kỳ trường hợp bạn đang xử lý):

if (window.jQuery && window.jQuery.ui.dialog) { 
    $(document).unbind("focusin.dialog"); 
} 

Đây là nơi jQuery UI liên kết với nó _focusTabble() phương pháp để focusin.dialog sự kiện của tài liệu.

if (!$.ui.dialog.overlayInstances) { 
      // Prevent use of anchors and inputs. 
      // We use a delay in case the overlay is created from an 
      // event that we're going to be cancelling. (#2804) 
      this._delay(function() { 
       // Handle .dialog().dialog("close") (#4065) 
       if ($.ui.dialog.overlayInstances) { 
        this.document.bind("focusin.dialog", function(event) { 
         if (!$(event.target).closest(".ui-dialog").length && 
           // TODO: Remove hack when datepicker implements 
           // the .ui-front logic (#8989) 
           !$(event.target).closest(".ui-datepicker").length) { 
          event.preventDefault(); 
          $(".ui-dialog:visible:last .ui-dialog-content") 
           .data("ui-dialog")._focusTabbable(); 
         } 
        }); 
       } 
      }); 
     } 

Answer 2

Những gì tôi đã giải quyết vấn đề này là để nhận xét ra điều này $(".ui-dialog:visible:last .ui-dialog-content").data("ui-dialog")._focusTabbable();

Bạn có thể tìm thấy đồng hoàn chỉnh bên dưới:

if (!$.ui.dialog.overlayInstances) { 
     // Prevent use of anchors and inputs. 
     // We use a delay in case the overlay is created from an 
     // event that we're going to be cancelling. (#2804) 
     this._delay(function() { 
      // Handle .dialog().dialog("close") (#4065) 
      if ($.ui.dialog.overlayInstances) { 
       this.document.bind("focusin.dialog", function(event) { 
        if (!$(event.target).closest(".ui-dialog").length && 
          // TODO: Remove hack when datepicker implements 
          // the .ui-front logic (#8989) 
          !$(event.target).closest(".ui-datepicker").length) { 
         event.preventDefault(); 
         //$(".ui-dialog:visible:last .ui-dialog-content") 
          //.data("ui-dialog")._focusTabbable(); 
        } 
       }); 
      } 
     }); 
    } 

Answer 3

Tôi gặp vấn đề tương tự khi tôi cần trọng tâm nằm trong nội dung hộp thoại của tôi (dành cho WCAG). Sử dụng tập trung() một mình thất bại, vì vậy những gì giải pháp cuối của tôi là trong instantiation thoại tôi đã thêm:

focus: function(event, ui) { 
        setTimeout(function(){ 
         $('#element').blur().focus().css({'color': '#000', 'text-decoration' : 'none', 'cursor' : 'default'}); 
        }, 500); 
       } 

tôi đã sử dụng thời gian chờ để đảm bảo khả năng tương thích. * Lưu ý, tôi đã thực hiện '#element' một thẻ neo (phần tử tương tác) để lấy nét. Đó là lý do cho phong cách.

Mã này sẽ có thể được thêm vào chức năng "mở" của Hộp thoại jQuery.