[javascript] jQuery UI 대화 상자가 첫 번째 텍스트 상자에 초점을 설정하지 못하게하십시오.

사용자가 링크를 클릭하면 표시되도록 jQuery UI 모달 대화 상자를 설정했습니다. 해당 대화 상자 div 태그에는 두 개의 텍스트 상자 (간결하게 1 코드 만 표시)가 있으며 포커스에 반응하는 jQuery UI DatePicker 텍스트 상자로 변경되었습니다.

문제는 jQuery UI 대화 상자 ( ‘open’)가 어떻게 든 첫 번째 텍스트 상자에 포커스를 두도록 트리거 한 다음 날짜 선택 달력이 즉시 열립니다.

그래서 초점이 자동으로 발생하지 않도록하는 방법을 찾고 있습니다.

<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>

답변

<input autofocus>

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

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

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

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

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

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