ASP.NET UpdatePanelでPostBack時にフォーカス状態を保持する
ASP.NETのUpdatePanelでPostBack時にコントロールのフォーカス状態を保持する方法を紹介します。
UpdatePanelのポストバックの開始と終了のイベントを設定するで紹介した方法で、非同期ポストバック開始時に、現在フォーカスしているコントロールの情報を保持しておき、非同期ポストバック終了時に保持した情報をもとにコントロールにフォーカスし直します。
フォーカス中のコントロールを取得する方法はJavaScript 現在フォーカスしているコントロールを取得するで紹介しています。
var activeElementId = ''; // 保持するための変数
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(function (sender, args) {
activeElementId = document.activeElement.id; // フォーカス中のコントロールIDを保持
});
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (sender, args) {
if (activeElementId != '' && document.getElementById(activeElementId)) {
document.getElementById(activeElementId).focus(); // 保持したコントロールIDに設定
}
});うまく行かないパターン
コントロールIDを保持するのではなく、コントロールごと保持したほうが簡単にできそうですが、以下のようにしてもうまくできませんでした。
var activeElement; // 保持するための変数
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(function (sender, args) {
activeElement = document.activeElement; // フォーカス中のコントロールを保持
});
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (sender, args) {
if (activeElement) {
activeElement.focus(); // 保持したコントロールIDに設定
}
});UpdatePanelでの非同期ポストバックにより、フォーカスしていたコントロール要素が内部的には置き換わっているため、保持したコントロールと、再フォーカスしたいコントロールが別のものになっているのが原因だと考えられます。