RADMaskedTextBox cursor at end rather than beginning

3 posts, 0 answers
  1. David O'Leary
    David O'Leary avatar
    19 posts
    Member since:
    Jul 2005

    Posted 07 Sep 2012 Link to this post

    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>


  2. Tsvetina
    Admin
    Tsvetina avatar
    1873 posts

    Posted 11 Sep 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. David O'Leary
    David O'Leary avatar
    19 posts
    Member since:
    Jul 2005

    Posted 12 Sep 2012 Link to this post

    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>
Back to Top