Issue with Ajax control toolkit - MaskedEditExtender control and IE11 browser compatibility

Question

User-1830797023 posted

Hi Team, I have searched for appropriate issue over the web for my requirement but i didn't find any.

I have a asp textbox control and ajax MaskedEditExtender control for that textbox. It should accepts only numbers and  6 characters length. the mask format is ---/---.  Here is my source code for this requirement.

<asp:TextBox ID="txt1" runat="server" MaxLength="6" />
 <aspajax:MaskedEditExtender ID="meeTxt1" TargetControlID="txt1" runat="server" MaskType="None" Mask="999\/999" InputDirection="LeftToRight"  ClearMaskOnLostFocus="false" OnFocusCssClass="MaskedEditFocus"  ></aspajax:MaskedEditExtender>

When We run this application in IE11 browser, the textbox field shows 'X' icon to clear the text. Here the problem is,

1.When we clear the text in textbox field the mask format(---/---) also gets cleared. I expected only data should be cleared but mask type should be visible to user.

2. After clearing data and if I try to enter text, 

a. In my remote development machine, it accepts up-to three digits only.It should accepts upto 6 digits.(I observed that it accepts the number of digits equal to the number of digits which comes before '/' in mask format ---/---. So in this case its three.)

b. In my Local machine, I have created a webform project to replicate this issue. Here it accepts upto seven digits(I think it considers even '/' also in mask format ---/---). It should accepts only six digits. 

I didn't understand why it works differently for my remote and local machines.

Any suggestions or solutions are accepted. Thanks in advance!!

Answer 1

User288213138 posted

Hi Anji674,

When we clear the text in textbox field the mask format(---/---) also gets cleared. I expected only data should be cleared but mask type should be visible to user

If you want to mask type is visible to user when clear the the text in textbox, you can set the ClearTextOnInvalid="true".

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:TextBox ID="txt1" runat="server" MaxLength="6" />
<ajaxToolkit:MaskedEditExtender ID="meeTxt1" TargetControlID="txt1" runat="server" MaskType="None" Mask="999\/999" 
InputDirection="LeftToRight"  ClearMaskOnLostFocus="false" OnFocusCssClass="MaskedEditFocus" ClearTextOnInvalid="true"></ajaxToolkit:MaskedEditExtender>

a. In my remote development machine, it accepts up-to three digits only.It should accepts upto 6 digits.(I observed that it accepts the number of digits equal to the number of digits which comes before '/' in mask format ---/---. So in this case its three.)

b. In my Local machine, I have created a webform project to replicate this issue. Here it accepts upto seven digits(I think it considers even '/' also in mask format ---/---). It should accepts only six digits. 

I tested the code in my side with IE11, it works fine and It accepts only six digits.

The result:

Best regards,

Sam

Answer 2

User-1830797023 posted

Hi Sam,

Thanks for your reply.

I have observed that you used backspace to clear the text.Here the issue is with 'X' icon functionality.Please use 'X' icon to clear the text in that textbox field.

I have applied ClearTextOnInvalid="true" as well but the still the issue is exists.

Thanks,

Anji

Answer 3

User288213138 posted

Hi Anji674,

I have observed that you used backspace to clear the text.Here the issue is with 'X' icon functionality.Please use 'X' icon to clear the text in that textbox field

Sorry for not understanding your question. 

My suggestion is to disable X Button directly in IE11, just like work in chrome. 

<style>
        #txt1::-ms-clear {
            display: none;
        }
    </style>

If you want to keep the x button, then I suggest you capture this X click event, and then add a mask type in the text box. But this is a very complicated process.

Ahout how to detect texbox clear-event in IE, you can refer to this link: https://stackoverflow.com/questions/15845827/detect-texbox-clear-event-in-ie-how-do-i-clear-the-input-type-text-textbox

And This should be an IE issue, I suggest you can ask for help on the IE forum

Best regards,

Sam