What is causing text box with a MaskedEditExtender to duplicate characters?

Question

I have a text box with a MaskedEditExtender. When I type in text, the output I get is jumbled with some numbers duplicated and others missing. If I remove the MaskedEditExtender, the textbox performs normally, but, of course, doesn't allow me to use an input mask for the text box. I've tried various combination of options for the MaskedEditExtender, but nothing short of removing the MaskedEditExtender fixes the problem. What could be causing this? Is there some option I can add or remove to fix this?

Here's an example: One of the fields I have is a phone field with the mask (999) 999-9999. When the form is displayed, before anything is entered, it looks like this:

(___) ___-____

This is the desired behavior. However, when I enter a number, say 1234567890 it displays as this:

112_)233455660987_-____

The 1, 2, 3, 5, and 6 are duplicated and 7, 8, 9, 0 appear in reverse order. Not to mention the mask seems to be ignored.

Please let me know if you need anymore information. I would really like to learn what the problem is and how to fix it. I can't do that if my question is summarily downgraded. Thank you!

Adding the full code:

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="CtlCheckOutAddressConfirm.ascx.cs"    Inherits="App_Controls_CtlCheckOutAddressConfirm" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    <script language="javascript" type="text/javascript">
    function checkClearZip() 
    {
        var bx = document.getElementById('<%=TxtZip.ClientID %>').value

        if (bx == "_____") 
        {
            document.getElementById('<%=TxtZip.ClientID %>').value = "";
        }
    }

    function checkClearPhone() 
    {
        var bx = document.getElementById('<%=TxtPhone.ClientID %>').value

        if (bx == "(___) ___-____") 
        {
            document.getElementById('<%=TxtPhone.ClientID %>').value = "";
        }
    }
    script>

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

<asp:UpdatePanel runat="server" ID="updCart" UpdateMode="Always">
 <ContentTemplate>
  <div>
        <table>

           <tr><td align="right">
           <font style=" font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height:20px; color: #575a61;">*Phone</font>
           </td><td align="left">
           <asp:TextBox ID="TxtPhone" MaxLength="15" onblur="checkClearPhone();" runat="server" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" Height="28px" Width="300px" Font-Size="X-Large"></asp:TextBox><br />                  
           <ajaxToolkit:MaskedEditExtender ID="MskPhone" runat="server"
               TargetControlID="TxtPhone"
               Mask="(999) 999-9999"
               MessageValidatorTip="true"
               OnFocusCssClass="MaskedEditFocus"
               OnInvalidCssClass="MaskedEditError"
               MaskType="None"
               DisplayMoney="None"
               AcceptNegative="None" 
               ClearMaskOnLostFocus="false" />
               </td></tr>
           <tr><td align="right">
           <font style=" font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height:20px; color: #575a61;">*E-mail</font>
           </td><td align="left">
           <asp:TextBox ID="TxtEmail" MaxLength="50" runat="server" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" Height="28px" Width="300px" Font-Size="X-Large"></asp:TextBox><br />                  
           </td></tr>
           </table>
           <div class="spacer"></div>

           <center><asp:ImageButton runat="server" ID="BtnContinue" ImageUrl="~/images/Buttons/bebtn-save.gif" OnClick="BtnContinue_Click" /></center>
       <asp:HiddenField ID="HdnMerch" runat="server" />
       <asp:HiddenField ID="HdnAdd" runat="server" />
  </div> </ContentTemplate>  
</asp:UpdatePanel>

Answer 1

I've experienced this issue myself.

Replication:

• Add two MaskedEditExtenders pointed to a single textbox.
• Launch your browser and enter data in the textbox. Each character will be doubled/duplicated.

Solution (at least for me):

• It appears your ASPX file is clean - no duplicates that I can see. Try the following items:
• Look in the CodeBehind for a dynamically-built MaskedEditExtender whose TargetControlID is pointed to the textbox in question.
• Note: this could be done directly in the MasterPage, the same page's CodeBehind, or one of these pages calling an obscurely-defined function in another area that performs this function (as was the case with my issue).

Happy coding!

Answer 2

This is one year later, but well, for the ones that can benefit.

A reason can be a partial post-back of the page. Be aware of the ScriptManager you are using. Try to isolate the code and see if it happen.