RADMaskedTextBox cursor at end rather than beginning

[David O'Leary]

When a user first visits our site, we popup a dialog in FancyBox where the user needs to enter their PostalCode to enter the site. We give the zipcode control focus as we popup the dialog. But, for some reason the cursor starts at the end of the mask so the user can't just type. They have to click on the front of the textbox in order to enter their zipcode. Any thoughts on why this is happening? It makes no sense to me. We're using version 2012.2.724.40.

<%@ Page Language="C#" AutoEventWireup="true" EnableEventValidation="false" MasterPageFile="~/MainMaster.master" Title="FittleBug Demo"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server" ID="Content1">

    <script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link href="js/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />

    <asp:Literal ID="clientScript" Mode="PassThrough" runat="server" />
        Site Content

    <!-- Steps -->
    <div style="display:none">
        <div id="HomeStep1" style="color:#3F3C2D; margin:10px 0 15px 0;padding:0 0 0 10px;width:450px;height:250px;">
            <div><asp:Literal id="SiteWelcome" runat="server"/></div>
            <div style="font-size:16px; padding:10px 0 3px 0;">Please Enter Your Zip Code</div>
            <div style="vertical-align:top;height:45px;">
                <div id="zipWrapper">
                    <telerik:RadMaskedTextBox id="txtZipcode" RequireCompleteText="true" PromptChar=" " ResetCaretOnFocus="true" SelectionOnFocus="CaretToBeginning" AutoCompleteType="HomeZipCode" CssClass="required digits zipcode" runat="server" />
                </div>
                <input type="button" id="btnGo" value="GO > " />
                <br style="clear:both;" />
                <span id="valZipcode" style="display:none">Please enter a valid zip code</span><span id="unknownZipcode" style="display:none">Sorry, we do not provide services in that zipcode</span>
            </div>
        </div>
    </div>
    <div style="display: none">
        <asp:HiddenField ID="rdNumerticTextBox" runat="server" />
        <asp:ImageButton ImageUrl="~/images/btn-go.png" runat="server" ID="imgbtnGo" OnClick="imgbtnGo_ShowData" />
    </div>

<script type="text/javascript">
    jQuery(function ($) {
        var $hidden = $("#" + aspHiddenId);
        var $button = $("#" + aspButtonId);
        var $zipcode = $("#<%=txtZipcode.ClientID %>");
        var $zipPopup = $("#zipPopup");
        var $btnGo = $("#btnGo");
        var $valZipcode = $("#valZipcode");
        var $unknownZipcode = $("#unknownZipcode");

        $('a[href*="youtube.com"]').fancybox({ 'type': 'iframe' });

        $zipcode.val($hidden.val());
        $zipPopup.fancybox({ modal: true })
        if ($zipcode.val() == "")
        {
            $zipPopup.click();
            $zipcode.focus();
        }

        $zipcode.keypress(function (e) {
            if (e.which === 13) {
                $btnGo.click();
            }
        });

        $btnGo.click(function () {
            var zipcode = $zipcode.val();
            if (/^\d{5}$/.test(zipcode)) {
                $.ajax({
                    type: "POST",
                    url: "services/ajax.svc/IsKnownZipcode",
                    contentType: "application/json; charset=utf-8",
                    data: $.toJSON({ "zipcode": zipcode }),
                    dataType: "json",
                    success: function (data) {
                        if (data.d) {
                            $valZipcode.hide();
                            $unknownZipcode.hide();
                            $hidden.val(zipcode);
                            $.fancybox.close();
                            $button.click();
                        }
                        else {
                            $valZipcode.hide();
                            $unknownZipcode.show();
                        }
                    },
                    error: function (msg) {
                        alert("Error checking zipcode. Please try again.");
                    }
                });
            } else {
                $valZipcode.show();
                $unknownZipcode.hide();
            }

            return false;
        });
    });
</script>
</asp:Content>

[Tsvetina]

Hello David,

I am posting the reply from the support ticket here as well, in case anyone else is interested. If the issue persists, please write to us in the support thread, so we avoid double posts.

The problem is most probably caused by the fact that you only focus the input element, which does not trigger a focus event for the RadMaskedTextBox. In such case the control cannot set the caret position. To get this working, try accessing the actual client object of the control and calling its focus() method:

if ($zipcode.val() == "")
{
    $find('<%=txtZipcode.ClientID %>').focus();
}

Kind regards,
Tsvetina
the Telerik team

[David O'Leary]

Thanks to Tsvetina this is now fixed. I had to make the change suggested above and I also had to load my scripts on pageLoad (also suggested by Tsvetina) because the RADMaskedTextBox hadn't yet been initialized when I was loading the scripts before. To load the scripts on page load, I'm now calling this in the Page Load on the code behind:

this.Page.ClientScript.RegisterStartupScript(this.GetType(), "StartupScript", "Sys.Application.add_load(applicationLoadHandler);"

And then I wrapped all my Javascript as a funuction called applicationLoadHandler:

<script type="text/javascript">
    var applicationLoadHandler = function() {
        var $hidden = $("#" + aspHiddenId);
        var $button = $("#" + aspButtonId);
        var $zipcode = $("#<%=txtZipcode.ClientID %>");
        var $zipPopup = $("#zipPopup");
        var $btnGo = $("#btnGo");
        var $valZipcode = $("#valZipcode");
        var $unknownZipcode = $("#unknownZipcode");

        $('a[href*="youtube.com"]').fancybox({ 'type': 'iframe' });

        $zipcode.val($hidden.val());
        $zipPopup.fancybox({ modal: true })
        if ($zipcode.val() == "") {
            $zipPopup.click();
            $find('<%=txtZipcode.ClientID %>').focus();
        }

        $zipcode.keypress(function (e) {
            if (e.which === 13) {
                $btnGo.click();
            }
        });

        $btnGo.click(function () {
            var zipcode = $zipcode.val();
            if (/^\d{5}$/.test(zipcode)) {
                $.ajax({
                    type: "POST",
                    url: "services/ajax.svc/IsKnownZipcode",
                    contentType: "application/json; charset=utf-8",
                    data: $.toJSON({ "zipcode": zipcode }),
                    dataType: "json",
                    success: function (data) {
                        if (data.d) {
                            $valZipcode.hide();
                            $unknownZipcode.hide();
                            $hidden.val(zipcode);
                            $.fancybox.close();
                            $button.click();
                        }
                        else {
                            $valZipcode.hide();
                            $unknownZipcode.show();
                        }
                    },
                    error: function (msg) {
                        alert("Error checking zipcode. Please try again.");
                    }
                });
            } else {
                $valZipcode.show();
                $unknownZipcode.hide();
            }

            return false;
        });
    }
</script>