This is a migrated thread and some comments may be shown as answers.

RADMaskedTextBox cursor at end rather than beginning

2 Answers 95 Views
Input
This is a migrated thread and some comments may be shown as answers.
David O'Leary
Top achievements
Rank 2
David O'Leary asked on 07 Sep 2012, 06:50 PM
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 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 11 Sep 2012, 02:50 PM
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.
0
David O'Leary
Top achievements
Rank 2
answered on 12 Sep 2012, 04:28 PM
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>
Tags
Input
Asked by
David O'Leary
Top achievements
Rank 2
Answers by
Tsvetina
Telerik team
David O'Leary
Top achievements
Rank 2
Share this question
or