1. ホーム
  2. javascript

[解決済み] jQuery UIダイアログのフォーカスが最初のテキストボックスに設定されないようにする

2022-04-27 01:20:20

質問

ユーザーがリンクをクリックしたときに表示されるjQuery UIのモーダルダイアログを設定しました。 そのダイアログのdivタグの中に2つのテキストボックス(簡潔にするために1つだけコードを表示します)があり、フォーカス時に反応するjQuery UI DatePickerテキストボックスに変更されています。

問題は、jQuery UI dialog('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>

解決方法は?

jQuery UI 1.10.0 Changelog リスト チケット4731 を修正しました。

focusSelectorが実装されておらず、代わりに様々な要素のカスケード検索が使用されていたようです。 チケットより。

オートフォーカスを拡張し、[autofocus]から始まり、:tabbable content、buttonpane、close button、dialogの順で拡張します。

そこで、ある要素をマークして autofocus 属性があり、それがフォーカスを得るべき要素です。

<input autofocus>

ドキュメント フォーカスのロジックについては、目次のすぐ下にある「フォーカス」というタイトルで説明されています。

<ブロッククオート

ダイアログを開くと、フォーカスは自動的に最初の項目である に一致するもの。

  1. ダイアログ内の最初の要素で autofocus 属性
  2. 最初の :tabbable ダイアログのコンテンツに含まれる
  3. 最初の :tabbable ダイアログのボタンペインにある
  4. ダイアログを閉じるボタン
  5. ダイアログ自体