[解決済み] 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>
で ドキュメント フォーカスのロジックについては、目次のすぐ下にある「フォーカス」というタイトルで説明されています。
<ブロッククオートダイアログを開くと、フォーカスは自動的に最初の項目である に一致するもの。
-
ダイアログ内の最初の要素で
autofocus
属性 -
最初の
:tabbable
ダイアログのコンテンツに含まれる -
最初の
:tabbable
ダイアログのボタンペインにある - ダイアログを閉じるボタン
- ダイアログ自体
関連
-
JavaScriptの関数この指摘の問題を説明
-
[解決済み】Node.js Error: Cannot find module express
-
[解決済み】ExpressJS : res.redirect()が期待通りに動かない?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryを使ってドロップダウンリスト(セレクトボックス)から選択されたテキストを取得する
-
[解決済み] jQueryでJavaScriptオブジェクトから選択する際に、オプションを追加する最も良い方法は何ですか?
-
[解決済み] jQuery ドロップダウンから選択されたオプションを取得する
-
[解決済み] ユーザーがEnterキーを押してフォームを送信できないようにする
-
[解決済み] jQuery UIダイアログのクローズボタンを削除するには?
-
[解決済み] 入力にフォーカスがあるかどうかをテストするためにjQueryを使用する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JavaScriptの関数この指摘の問題を説明
-
Vueがechartsのtooltipにクリックイベントを追加するケーススタディ
-
Vueのイベント処理とイベントモディファイアの解説
-
[解決済み】最大呼び出しスタックサイズ超過エラー
-
[解決済み】Node.js getaddrinfo ENOTFOUND
-
[解決済み] 配列の結合時に未定義のプロパティ 'push' を読み込むことができない
-
[解決済み】React - TypeError: 未定義のプロパティ 'props' を読み取ることができない。
-
[解決済み】React Uncaught Error: 対象コンテナが DOM 要素でない [重複]。
-
[解決済み】リクエストに失敗していないのに、「TypeError: failed to fetch」が表示される。
-
OSSアップロードエラーを解決する: net::ERR_SSL_PROTOCOL_ERROR