Ngăn hộp thoại jQuery UI đặt tiêu điểm vào hộp văn bản đầu tiên


156

Tôi đã thiết lập hộp thoại phương thức UI UI để hiển thị khi người dùng nhấp vào liên kết. Có hai hộp văn bản (tôi chỉ hiển thị mã cho 1 cho ngắn gọn) trong thẻ div hộp thoại đó và nó được thay đổi thành hộp văn bản jQuery UI DatePicker phản ứng tập trung.

Vấn đề là hộp thoại UI UI ('open') bằng cách nào đó kích hoạt hộp văn bản đầu tiên có tiêu điểm, sau đó kích hoạt lịch hẹn hò để mở ngay lập tức.

Vì vậy, tôi đang tìm cách để ngăn chặn sự tập trung tự động xảy ra.

<div><a id="lnkAddReservation" href="#">Add reservation</a></div>

<div id="divNewReservation" style="display:none" title="Add reservation">
    <table>
        <tr>
            <th><asp:Label AssociatedControlID="txtStartDate" runat="server" Text="Start date" /></th>
            <td>
                <asp:TextBox ID="txtStartDate" runat="server" CssClass="datepicker" />
            </td>
        </tr>
    </table>

    <div>
        <asp:Button ID="btnAddReservation" runat="server" OnClick="btnAddReservation_Click" Text="Add reservation" />
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        var dlg = $('#divNewReservation');
        $('.datepicker').datepicker({ duration: '' });
        dlg.dialog({ autoOpen:false, modal: true, width:400 });
        $('#lnkAddReservation').click(function() { dlg.dialog('open'); return false; });
        dlg.parent().appendTo(jQuery("form:first"));
    });
</script>

nó sẽ tập trung ngay cả vào một hình ảnh! cả hai thẻ <img> thông thường - cũng như <input type = image>
Simon_Weaver

Câu trả lời:


78

Giao diện người dùng jQuery 1.10.0 Changelog liệt kê vé 4731 là cố định.

Có vẻ như FocusSelector không được triển khai, nhưng thay vào đó, một tìm kiếm xếp tầng cho các yếu tố khác nhau đã được sử dụng. Từ vé:

Mở rộng tự động lấy nét, bắt đầu bằng [tự động lấy nét], sau đó: nội dung có thể lập bảng, sau đó nhấn nút, sau đó đóng nút, sau đó hộp thoại

Vì vậy, đánh dấu một phần tử bằng autofocusthuộc tính và đó là phần tử cần lấy trọng tâm:

<input autofocus>

Trong tài liệu , logic tập trung được giải thích (ngay dưới mục lục, dưới tiêu đề 'Tiêu điểm'):

Khi mở hộp thoại, tiêu điểm sẽ tự động được chuyển đến mục đầu tiên khớp với các mục sau:

  1. Phần tử đầu tiên trong hộp thoại có autofocusthuộc tính
  2. Phần :tabbabletử đầu tiên trong nội dung của hộp thoại
  3. Phần :tabbabletử đầu tiên trong nút của hộp thoại
  4. Nút đóng của hộp thoại
  5. Hộp thoại chính nó

Downvote để làm gì? Nếu đó là vì tôi liệt kê 1.9 là phiên bản sửa lỗi, tôi đã cập nhật lên 1.10 để khớp với vé.
slolife

1
Tôi đang xem tài liệu jquery-ui 1.10 cho Hộp thoại và tôi không thấy nó. Tôi đã tìm kiếm "FocusSelector" trong api, và nó không có ở đó.
Paul Tomblin

3
Đặt tiêu điểm cho bất kỳ phần tử nào tắt màn hình sẽ cuộn cửa sổ lên hoặc xuống phần tử đó và điều này xảy ra bất cứ khi nào cửa sổ lấy nét, không chỉ trên hộp thoại mở. Nếu tôi sử dụng Fireorms để "kiểm tra phần tử" và sau đó nhấp lại vào cửa sổ tài liệu, cửa sổ của tôi sẽ cuộn lên hoặc xuống bất kỳ phần tử nào mà jQuery-UI tập trung vào. Câu hỏi không phải là làm thế nào để chọn yếu tố nào được tập trung, mà là làm thế nào để ngăn chặn sự tập trung. Chọn một yếu tố khác để tập trung vào sẽ không giải quyết được vấn đề.
Vladimir Kornea

4
Ý tưởng rằng UI UI coi điều này là 'cố định' là điên rồ. Việc sửa chữa là để loại bỏ bất kỳ lý lấy nét tự động hoàn toàn. Tôi yêu cầu bạn mở một hộp thoại, không tập trung vào đầu vào. Rất khó chịu.
AJB

2
fwiw, tôi đã thêm một đầu vào w / type = "hidden" phía trên đầu vào đầu tiên và thêm thuộc tính tự động lấy nét vào nó. Nó không có nghĩa là những gì bạn nghĩ, nhưng nó hoạt động để khắc phục vấn đề này.
jinglểula

77

Thêm một khoảng ẩn phía trên nó, sử dụng ui-helper-hidden-access để làm cho nó ẩn bằng định vị tuyệt đối. Tôi biết bạn có lớp học đó bởi vì bạn đang sử dụng hộp thoại từ jquery-ui và nó trong jquery-ui.

<span class="ui-helper-hidden-accessible"><input type="text"/></span>

1
Công việc tuyệt vời xung quanh. Không yêu cầu js, không thay đổi bố cục và jquery ui hỗ trợ nó nguyên bản.
steampowered

Đồng ý, công việc tuyệt vời xung quanh. Cũng tốt để biết về lớp có thể truy cập ẩn! Cảm ơn!!
dùng1055761

4
Điều này gây ra sự cố cho những người sử dụng công nghệ hỗ trợ (ví dụ: trình đọc màn hình)
rink.attguard.6

1
@ rink.attguard.6 có vấn đề gì?
oxfn

giải pháp tuyệt vời
Pedro Coelho

63

Trong jQuery UI> = 1.10.2, bạn có thể thay thế _focusTabbablephương thức nguyên mẫu bằng hàm giả dược:

$.ui.dialog.prototype._focusTabbable = $.noop;

Vĩ cầm

Điều này sẽ ảnh hưởng đến tất cả dialog s trong trang mà không yêu cầu chỉnh sửa từng cái một cách thủ công.

Hàm ban đầu không làm gì ngoài việc đặt tiêu điểm thành phần tử đầu tiên với autofocus thuộc tính / tabbablephần tử / hoặc quay lại chính hộp thoại. Vì việc sử dụng nó chỉ là tập trung vào một yếu tố, nên không có vấn đề gì khi thay thế nó bằng a noop.


7
Giờ và giờ và giờ và giờ đốt cháy về điều này. Khách hàng của tôi cảm ơn bạn.
lamarant

1
Đây nên là câu trả lời!
briansol

2 ngày tìm kiếm giải pháp này ... không có gì khác hiệu quả ... Cảm ơn rất nhiều!
Legionar

1
Cảnh báo: khi hộp thoại bật lên, nhấn phím Escape sẽ không đóng hộp thoại (cho đến khi bạn tập trung hộp thoại).
Robert

1
@Robert, thay vì thay thế nó $.noop, thay thế nó bằng một chức năng ghi lại hộp thoại hoạt động, sau đó đăng ký một trình xử lý sự kiện khóa toàn cầu chặn ESCvà đóng hộp thoại 'hoạt động' nếu có.
Perkins

28

Bắt đầu từ jQuery UI 1.10.0, bạn có thể chọn phần tử đầu vào nào cần tập trung vào bằng cách sử dụng tự động lấy nét thuộc tính HTML5 .

Tất cả bạn phải làm là tạo một phần tử giả làm đầu vào đầu tiên của bạn trong hộp thoại. Nó sẽ hấp thụ sự tập trung cho bạn.

<input type="hidden" autofocus="autofocus" />

Điều này đã được thử nghiệm trong Chrome, Firefox và Internet Explorer (tất cả các phiên bản mới nhất) vào ngày 7 tháng 2 năm 2013.

http://jqueryui.com/upTHER-guide/1.10/#added-ability-to-specify-which-element-to-f Focus-on-open


27

Tôi tìm thấy đoạn mã sau chức năng hộp thoại UI UI để mở.

c([]).add(d.find(".ui-dialog-content :tabbable:first")).add(d.find(".ui-dialog-buttonpane :tabbable:first")).add(d).filter(":first").focus();

Bạn có thể giải quyết hành vi jQuery hoặc thay đổi hành vi.

tabindex -1 hoạt động như một cách giải quyết.


1
Không tabindex = -1 ngăn tôi chuyển sang hộp văn bản?
slolife

2
Cảm ơn các nghiên cứu. Bây giờ tôi biết rằng đó là mã thực tế đang làm điều đó. Tôi có thể đưa ra đề xuất cho nhóm UI UI để thêm tùy chọn tắt tính năng tự động lấy nét này.
slolife

3
@slolife - Xin lỗi vì đã phục hồi chủ đề thực sự cũ này, nhưng vé đó cho biết bản sửa lỗi ( focusSelectortùy chọn) được cho là trong jQueryUI 1.8, và chúng tôi hiện ở mức 1.8.13 và tôi không thấy nó trong tài liệu hộp thoại jQueryUI . Điều gì đã xảy ra với điều này?
Tom Hamming

Đừng bận tâm. Tôi đã thấy "Cột mốc thay đổi từ TBD thành 1.8" trong lịch sử sửa đổi và không nhận thấy rằng nó thực sự nói 1.9 ở trên cùng.
Tom Hamming

Tôi có một vấn đề tương tự, cách giải quyết của tôi được mô tả ở đây - stackoverflow.com/a/12250193/80002
đánh dấu

15

Chỉ cần tìm ra điều này trong khi chơi xung quanh.

Tôi đã tìm thấy với các giải pháp này để loại bỏ tiêu điểm, khiến cho ESCphím này ngừng hoạt động (tức là đóng hộp thoại) khi lần đầu tiên đi vào Hộp thoại.

Nếu hộp thoại mở ra và bạn nhấn ngay lập tức ESC , nó sẽ không đóng hộp thoại (nếu bạn đã bật), vì tiêu điểm nằm trên một số trường ẩn hoặc một cái gì đó và nó không nhận được các sự kiện nhấn phím.

Cách tôi sửa là thêm nó vào sự kiện mở để loại bỏ tiêu điểm khỏi trường đầu tiên:

$('#myDialog').dialog({
    open: function(event,ui) {
        $(this).parent().focus();
    }
});

Điều này đặt tập trung vào hộp thoại, không nhìn thấy được, và sau đó ESCphím hoạt động.


3
Đây có vẻ là giải pháp hoạt động duy nhất, không bao gồm thêm HTML vô dụng, xóa tabindex hoặc phá khóa ESC.
Bojan Bedrač

10

Đặt tabindex của đầu vào thành -1, sau đó đặt hộp thoại.open để khôi phục tabindex nếu bạn cần sau:

$(function() {
    $( "#dialog-message" ).dialog({
        modal: true,
        width: 500,
        autoOpen: false,
        resizable: false,
        open: function()
        {
            $( "#datepicker1" ).attr("tabindex","1");
            $( "#datepicker2" ).attr("tabindex","2");
        }
    });
});

4
Không tabindex = -1 ngăn tôi chuyển sang hộp văn bản?
slolife

1
bạn có thể sử dụng setTimeout để đặt lại tabindex sau khi hộp thoại được hiển thị
redsapes

10

Cách giải quyết của tôi:

open: function(){
  jQuery('input:first').blur();
  jQuery('#ui-datepicker-div').hide();
},  

+1. Hoạt động như một bùa mê bằng cách sử dụng :firstbộ chọn hoặc .first()trong FF / Chrome / IE9. Ném nó vào các dialogopencông trình ràng buộc quá.
nickb

Cái này cũng đưa tôi đến đó. Ngoại trừ tôi, hộp thoại của tôi hoàn toàn không có đầu vào và liên kết đầu tiên đang tập trung ... vì vậy tôi đã thêm tùy chọn này vào hộp thoại jQuery của mình:open: function(){ $('a').blur(); // no autofocus on links }
Marcus

8

Tôi đã có nội dung dài hơn hộp thoại. Khi mở, hộp thoại sẽ chuyển sang đầu tiên: tabbable ở phía dưới. Đây là sửa chữa của tôi.

$("#myDialog").dialog({
   ...
   open: function(event, ui) { $(this).scrollTop(0); }
});

Điều này làm việc cho tôi, nhưng tôi đã sử dụng $('...').blur();thay vì cuộn.
Jawa

4
Nội dung của tôi cũng rất dài. Mờ xóa lựa chọn, nhưng để hộp thoại cuộn xuống phía dưới. scrollTop cuộn nội dung lên trên cùng nhưng để lại lựa chọn. Tôi đã kết thúc bằng cách sử dụng $ ('...'). Blur (); $ (này) .scrollTop (0); làm việc như một nhà vô địch

7

Cách giải quyết đơn giản:

Chỉ cần tạo một yếu tố vô hình với tabindex = 1 ... Điều này sẽ không tập trung vào công cụ hẹn hò ...

ví dụ.:

<a href="" tabindex="1"></a>
...
Here comes the input element

Hoạt động tốt trong eg9 và firefox, nhưng không phải safari / chrome.
tuseau

3

Đây là giải pháp tôi đã triển khai sau khi đọc qua vé UI UI # 4731 , ban đầu được đăng bởi slolife như một phản hồi cho câu trả lời khác. (Chiếc vé cũng được anh ấy tạo ra.)

Đầu tiên, trong bất kỳ phương thức nào bạn sử dụng để áp dụng tự động hoàn thành cho trang, hãy thêm dòng mã sau:

$.ui.dialog.prototype._focusTabbable = function(){};

Điều đó vô hiệu hóa hành vi "tự động lấy nét" của jQuery. Để đảm bảo rằng trang web của bạn tiếp tục có thể truy cập rộng rãi, hãy bọc các phương thức tạo hộp thoại của bạn để có thể thêm mã bổ sung và thêm một cuộc gọi để tập trung vào yếu tố đầu vào đầu tiên:

function openDialog(context) {

    // Open your dialog here

    // Usability for screen readers.  Focus on an element so that screen readers report it.
    $("input:first", $(context)).focus();

}

Để tiếp tục giải quyết khả năng truy cập khi các tùy chọn tự động hoàn tất được chọn qua bàn phím, chúng tôi ghi đè cuộc gọi lại tự động "chọn" của UI UI và thêm một số mã bổ sung để đảm bảo textEuity không bị mất tiêu điểm trong IE 8 sau khi chọn.

Đây là mã chúng tôi sử dụng để áp dụng tự động hoàn thành cho các phần tử:

$.fn.applyAutocomplete = function () {

    // Prevents jQuery dialog from auto-focusing on the first tabbable element.
    // Make sure to wrap your dialog opens and focus on the first input element
    // for screen readers.
    $.ui.dialog.prototype._focusTabbable = function () { };

    $(".autocomplete", this)
        .each(function (index) {

            var textElement = this;

            var onSelect = $(this).autocomplete("option", "select");
            $(this).autocomplete("option", {
                select: function (event, ui) {
                    // Call the original functionality first
                    onSelect(event, ui);

                    // We replace a lot of content via AJAX in our project.
                    // This ensures proper copying of values if the original element which jQuery UI pointed to
                    // is replaced.
                    var $hiddenValueElement = $("#" + $(textElement).attr('data-jqui-acomp-hiddenvalue'));
                    if ($hiddenValueElement.attr("value") != ui.item.value) {
                        $hiddenValueElement.attr("value", ui.item.value);
                    }

                    // Replace text element value with that indicated by "display" if any
                    if (ui.item.display)
                        textElement.value = ui.item.display;

                    // For usability purposes.  When using the keyboard to select from an autocomplete, this returns focus to the textElement.
                    $(textElement).focus();

                    if (ui.item.display)
                        return false;

                }
            });
        })
        // Set/clear data flag that can be checked, if necessary, to determine whether list is currently dropped down
        .on("autocompleteopen", function (event, ui) {
            $(event.target).data().autocompleteIsDroppedDown = true;
        })
        .on("autocompleteclose", function (event, ui) {
            $(event.target).data().autocompleteIsDroppedDown = false;
        });

    return this;
}

2

Bạn có thể cung cấp tùy chọn này, để tập trung vào nút đóng thay thế.

.dialog({
      open: function () {
              $(".ui-dialog-titlebar-close").focus();
            }
   });

1

Đây có thể là một hành vi trình duyệt không phải là vấn đề plugin jQuery. Bạn đã thử xóa tiêu điểm theo chương trình sau khi bạn mở cửa sổ bật lên.

$('#lnkAddReservation').click(function () {
    dlg.dialog('open');

    // you may want to change the selector below
    $('input,textarea,select').blur();

    return false;
});

Không được kiểm tra nhưng sẽ hoạt động tốt.


1
thật đáng buồn điều này không hoạt động. không chắc chắn nếu đó là một điều IE, hay một giao diện người dùng jquery. nhưng ngay cả khi bạn chuyển trọng tâm sang một thứ khác theo chương trình, lịch vẫn mở.
Patricia

1

Tôi cũng gặp vấn đề tương tự và giải quyết nó bằng cách chèn một đầu vào trống trước bộ đo thời gian, nó đánh cắp tiêu điểm mỗi khi hộp thoại được mở. Đầu vào này được ẩn trong mỗi lần mở hộp thoại và hiển thị lại khi đóng.


1

Chà, thật tuyệt khi không ai tìm thấy giải pháp cho bây giờ, nhưng có vẻ như tôi có một cái gì đó cho bạn. Tin xấu là hộp thoại lấy tiêu điểm trong mọi trường hợp ngay cả khi không có đầu vào và liên kết nào bên trong. Tôi sử dụng hộp thoại như một tooltip và chắc chắn cần tập trung ở phần tử gốc. Đây là giải pháp của tôi:

sử dụng tùy chọn [autoOpen: false]

$toolTip.dialog("widget").css("visibility", "hidden"); 
$toolTip.dialog("open");
$toolTip.dialog("widget").css("visibility", "visible");

Trong khi hộp thoại vô hình, tiêu điểm không được đặt ở bất cứ đâu và giữ nguyên vị trí ban đầu. Nó hoạt động cho các chú giải công cụ chỉ bằng một văn bản đơn giản, nhưng không được kiểm tra cho các hộp thoại chức năng nhiều hơn trong đó có thể rất quan trọng để hiển thị hộp thoại vào thời điểm mở. Có lẽ sẽ hoạt động tốt trong mọi trường hợp.

Tôi hiểu rằng bài đăng gốc chỉ là để tránh tập trung vào yếu tố đầu tiên, nhưng bạn có thể dễ dàng quyết định nơi tập trung nên sau khi hộp thoại được mở (sau mã của tôi).

Đã thử nghiệm trong IE, FF và Chrome.

Hy vọng điều này sẽ giúp được ai đó.



1

Tôi có một vấn đề tương tự. Tôi mở hộp thoại báo lỗi khi xác thực thất bại và nó lấy tiêu điểm, giống như Flugan hiển thị nó trong câu trả lời của mình . Vấn đề là ngay cả khi không có phần tử nào trong hộp thoại có thể được lập bảng, thì hộp thoại vẫn được tập trung. Đây là mã chưa hoàn thành ban đầu từ jquery-ui-1.8,23 \ js \ jquery.ui.dialog.js:

// set focus to the first tabbable element in the content area or the first button
// if there are no tabbable elements, set focus on the dialog itself
$(self.element.find(':tabbable').get().concat(
  uiDialog.find('.ui-dialog-buttonpane :tabbable').get().concat(
    uiDialog.get()))).eq(0).focus();

Nhận xét là của họ!

Điều này thực sự tồi tệ đối với tôi vì nhiều lý do. Điều khó chịu nhất là phản ứng đầu tiên của người dùng là nhấn vào backspace để xóa ký tự cuối cùng, nhưng thay vào đó, anh ta được nhắc rời khỏi trang, vì backspace bị đánh bên ngoài một điều khiển đầu vào.

Tôi thấy rằng cách giải quyết sau đây hoạt động khá tốt đối với tôi:

jqueryFocus = $.fn.focus;
$.fn.focus = function (delay, fn) {
  jqueryFocus.apply(this.filter(':not(.ui-dialog)'), arguments);
};

Điều này có thể được mở rộng để chỉ ảnh hưởng đến các hộp thoại cụ thể bằng cách sử dụng tùy chọn 'hộp thoại' trong .dialog () và sau đó thay đổi ở trên: không lọc để bao gồm lớp của bạn. ví dụ: không (.ui-đàm thoại.myDialogClass)
Andrew Martinez

1

Tôi đã tìm kiếm một vấn đề khác nhau nhưng cùng một nguyên nhân. Vấn đề là bộ hộp thoại tập trung vào cái đầu tiên <a href="">.</a>nó tìm thấy. Vì vậy, nếu bạn có nhiều văn bản trong hộp thoại và thanh cuộn xuất hiện, bạn có thể gặp tình huống thanh cuộn sẽ được cuộn xuống phía dưới. Tôi tin rằng điều này cũng sửa chữa câu hỏi của những người đầu tiên. Mặc dù những người khác cũng làm như vậy.

Cách khắc phục đơn giản dễ hiểu. <a id="someid" href="#">.</a> là dòng đầu tiên trong div hộp thoại của bạn.

THÍ DỤ:

 <div id="dialogdiv" title="some title">
    <a id="someid" href="#">.</a>
    <p>
        //the rest of your stuff
    </p>
</div>

Nơi hộp thoại của bạn được bắt đầu

$(somediv).dialog({
        modal: true,
        open: function () { $("#someid").hide(); otherstuff or function },
        close: function () { $("#someid").show(); otherstuff or function }
    });

Ở trên sẽ không có gì tập trung và các thanh cuộn sẽ vẫn ở trên cùng nơi nó thuộc về. Sự <a>tập trung nhưng sau đó được ẩn đi. Vì vậy, hiệu quả tổng thể là hiệu quả mong muốn.

Tôi biết đây là một chủ đề cũ nhưng đối với tài liệu UI thì không có cách khắc phục nào. Điều này không yêu cầu làm mờ hoặc tập trung để làm việc. Không chắc chắn nếu nó là thanh lịch nhất. Nhưng nó chỉ có ý nghĩa và dễ dàng để giải thích cho bất cứ ai.


1

Nếu bạn chỉ có một trường ở dạng hộp thoại Jquery và đó là trường cần Datepicker, thay vào đó, bạn chỉ có thể đặt tiêu điểm vào nút Đóng (chéo) của hộp thoại trong thanh tiêu đề của hộp thoại:

$('.ui-dialog-titlebar-close').focus();

Gọi hộp thoại SAU này đã được khởi tạo, ví dụ:

$('#yourDialogId').dialog();
$('.ui-dialog-titlebar-close').focus();

Bởi vì nút đóng được hiển thị sau khi .dialog()được gọi.


1

Nếu bạn đang sử dụng các nút hộp thoại, chỉ cần đặt autofocusthuộc tính trên một trong các nút:

$('#dialog').dialog({
  buttons: [
    {
      text: 'OK',
      autofocus: 'autofocus'
    },
    {
      text: 'Cancel'
    }
  ]
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

<div id="dialog" title="Basic dialog">
  This is some text.
  <br/>
  <a href="www.google.com">This is a link.</a>
  <br/>
  <input value="This is a textbox.">
</div>


0

Tôi đã có cùng một vấn đề.

Cách giải quyết tôi đã làm là thêm hộp văn bản giả ở đầu hộp thoại.

<input type="text" style="width: 1px; height: 1px; border: 0px;" />

0

Như đã đề cập, đây là một lỗi đã biết với Giao diện người dùng jQuery và sẽ được khắc phục tương đối sớm. Cho đến lúc đó ...

Đây là một tùy chọn khác, vì vậy bạn không phải gặp rắc rối với tabindex:

Tạm thời tắt tính năng hẹn hò cho đến khi hộp thoại mở ra:

dialog.find(".datepicker").datepicker("disable");
dialog.dialog({
    "open": function() {$(this).find(".datepicker").datepicker("enable");},
});

Làm việc cho tôi.

Câu hỏi trùng lặp: Làm thế nào để làm mờ đầu vào mẫu đầu tiên khi mở hộp thoại


0

Để mở rộng một số câu trả lời trước đó (và bỏ qua khía cạnh ngày tháng phụ trợ), nếu bạn muốn ngăn focus()sự kiện tập trung vào trường nhập đầu tiên khi hộp thoại của bạn mở ra, hãy thử điều này:

$('#myDialog').dialog(
    { 'open': function() { $('input:first-child', $(this)).blur(); }
});

0

Tôi đã có một vấn đề tương tự và giải quyết nó bằng cách tập trung vào hộp thoại sau khi mở:

var $dialog = $("#pnlFiltros")
    .dialog({
        autoOpen: false,
        hide: "puff",                   
        width: dWidth,
        height: 'auto',
        draggable: true,
        resizable: true,
        closeOnScape : true,
        position: [x,y]                    
    });
$dialog.dialog('open');
$("#pnlFiltros").focus(); //focus on the div being dialogued (is that a word?)

Nhưng trong trường hợp của tôi, phần tử đầu tiên là một mỏ neo, vì vậy tôi không biết liệu trong trường hợp của bạn, nó có để lại công cụ hẹn hò được mở không.

EDIT: chỉ hoạt động trên IE


0

tìm trong jquery.ui.js

d.find(".ui-dialog-buttonpane :tabbable").get().concat(d.get()))).eq(0).focus(); 

và thay thế bằng

d.find(".ui-dialog-buttonpane :tabbable").get().concat(d.get()))).eq(-1).focus();

0

jQuery 1.9 được phát hành và dường như không có cách khắc phục. Cố gắng ngăn tiêu điểm của hộp văn bản đầu tiên bằng một số phương pháp được đề xuất không hoạt động trong 1.9. Tôi nghĩ vì các phương pháp cố làm mờ tiêu điểm hoặc di chuyển tiêu điểm xảy ra SAU hộp văn bản trong hộp thoại đã lấy được tiêu điểm và thực hiện công việc bẩn thỉu của nó.

Tôi không thể thấy bất cứ điều gì trong tài liệu API khiến tôi nghĩ rằng mọi thứ đã thay đổi về chức năng mong đợi. Tắt để thêm nút mở ...


Bản sửa lỗi hiện đã được đẩy lên 1.10 theo vé jQuery: bug.jqueryui.com/ticket/4731
slolife

0

Tôi đã có vấn đề tương tự. Trên trang của tôi đầu vào đầu tiên là hộp văn bản với lịch UI UI. Yếu tố thứ hai là nút. Vì ngày đã có giá trị, tôi đặt tiêu điểm vào nút, nhưng trước tiên hãy thêm kích hoạt để làm mờ trên hộp văn bản. Điều này giải quyết vấn đề trong tất cả các trình duyệt và có thể trong tất cả các phiên bản của jQuery. Đã thử nghiệm trong phiên bản 1.8.2.

<div style="padding-bottom: 30px; height: 40px; width: 100%;">
@using (Html.BeginForm("Statistics", "Admin", FormMethod.Post, new { id = "FormStatistics" }))
{
    <label style="float: left;">@Translation.StatisticsChooseDate</label>
    @Html.TextBoxFor(m => m.SelectDate, new { @class = "js-date-time",  @tabindex=1 })
    <input class="button gray-button button-large button-left-margin text-bold" style="position:relative; top:-5px;" type="submit" id="ButtonStatisticsSearchTrips" value="@Translation.StatisticsSearchTrips"  tabindex="2"/>
}

<script type="text/javascript">
$(document).ready(function () {        
    $("#SelectDate").blur(function () {
        $("#SelectDate").datepicker("hide");
    });
    $("#ButtonStatisticsSearchTrips").focus();

});   


0

Điều này thực sự quan trọng đối với điện thoại thông minh và máy tính bảng vì bàn phím xuất hiện khi đầu vào có trọng tâm. Đây là những gì tôi đã làm, thêm đầu vào này vào đầu div:

<input type="image" width="1px" height="1px"/>

Không hoạt động với kích thước 0px. Tôi đoán nó thậm chí còn tốt hơn với một hình ảnh trong suốt thực sự, .pnghoặc .giftôi đã không thử.

Làm việc tốt cho đến nay trong iPad.


-1

Bạn có thể thêm cái này:

...

dlg.dialog({ autoOpen:false,
modal: true, 
width: 400,
open: function(){                  // There is new line
  $("#txtStartDate").focus();
  }
});

...


3
Anh ấy hỏi làm thế nào để ngăn chặn sự tập trung, không thêm sự tập trung.
CBarr

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.