ユーザーがリンクをクリックしたときに表示される jQuery UI モーダル ダイアログを設定しました。ダイアログの div タグには 2 つのテキスト ボックスがあり (簡潔にするために 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>
ベストアンサー1
その上に非表示のスパンを追加し、ui-helper-hidden-accessible を使用して絶対位置で非表示にします。jquery-ui のダイアログを使用しており、jquery-ui 内にあるため、そのクラスがあることはわかっています。
<span class="ui-helper-hidden-accessible"><input type="text"/></span>