7月 11

ASP.NET AjaxControlToolkit ModalPopupExtender 表示時にテキストボックス(TextBox)にフォーカス(focus)をあてる

通常、AjaxControlToolkitのModalPopupExtenderを利用して表示させると、フォーカスを自由にセットできない。
そして色々とググりまくったが日本語で丁寧に書かれているものが見つからなかったので、覚書。

vb側


Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If IsPostBack = False Then
        cmdOpen.Attributes.Add("onclick", "fnSetFocus('" & txtSearch.ClientID & "');")
    End If
End Sub

aspx側に適当に記載


<script type="text/javascript">
<!--
    //ModalPopupExtenderで表示した際にフォーカスをセットする
    var clientid;
    function fnSetFocus(txtClientId) {
        clientid = txtClientId;
        setTimeout("fnFocus()", 100);
    }
    function fnFocus() {
        eval("document.getElementById('" + clientid + "').focus()");
    }
// -->
</script>

あとは通常通り、ModalPopupExtenderの設定をし、動かせばOKです。
このサンプルでは、TargetControlIDを”cmdOpen”として記述しています。

参考元ソース

http://www.aspdotnetcodes.com/ModalPopup_Postback.aspx