MaskedTextbox that changes mask using javascript behaving strangely on mobile browsers

9 posts, 0 answers
  1. Condorito
    Condorito avatar
    38 posts
    Member since:
    Mar 2009

    Posted 13 Jun Link to this post

    I have a RadComboBox that triggers some Javascript which changes a MaskedTextBox's mask from a 10-digit phone number to a 30-digit free-form mask.  This behaves fine when testing under desktop browsers such as Chrome, but when I test it using mobile browsers on iOS and Android devices I get strange behavior.  This occurs if I select the first option:

    Using Chrome under Android (on a Samsung Galaxy S5 running Android 5.1), when setting focus on the MaskedTextBox, when I start typing on it the first value is ignored and the second value is added to the input field.  If I try to edit the value I entered, the cursor jumps to the right side of the object and sometimes can't delete values and seems to get stuck.

    Using Safari under iOS on an iPhone, everything seems to work properly except when focusing outside of the MaskedTextBox and giving it focus again, it pads the value entered with empty spaces.

    I isolated the code below.  Am I doing something wrong or is this an issue with the MaskedTextBox control under mobile browsers?

    I'm using UI for ASP.NET AJAX Q2 2016 for the 4.5 .NET Framework.

    Thank you:

     

    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
        <telerik:RadScriptBlock runat="server" ID="RSBlock">
         
             <script type="text/javascript">
                 //<![CDATA[
     
                 function rcbType_ClientIndexChanged(sender, eventArgs) {
                     var selectedItem = eventArgs.get_item();
     
     
                     switchMask(selectedItem.get_value());
     
                 }
     
                 function switchMask(selectedValue) {
                     var rtxtNumber = $find("<%= rtxtNumber.ClientID%>");
                     var masks;
     
                     switch (selectedValue) {
                         case '0':
                             var rtxtNumberResource1Label = 'Enter Order Number';
     
                             $get(rtxtNumber._wrapperElementID).getElementsByTagName("label")[0].innerHTML = rtxtNumberResource1Label;
                             rtxtNumber.set_enabled(true);
                             rtxtNumber.enable();
     
                             masks = [
                                 new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(),
                                 new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(),
                                 new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(),
                                 new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(),
                                 new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(),
                                 new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(),
                                 new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(),
                                 new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(),
                                 new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(),
                             ];
                             rtxtNumber._length = 0;
                             rtxtNumber._setMask(masks);
                             rtxtNumber.clear();
     
                             break;
     
                         case '1':
                             rtxtNumber.set_visible(true);
                             var rmtbNumberResource1Label = 'Enter Phone Number';
     
                             $get(rtxtNumber._wrapperElementID).getElementsByTagName("label")[0].innerHTML = rmtbNumberResource1Label;
                             
                             rtxtNumber.set_enabled(true);
                             rtxtNumber.enable();
                             masks = [
                              new Telerik.Web.UI.RadLiteralMaskPart('('),
                             new Telerik.Web.UI.RadDigitMaskPart(),
                              new Telerik.Web.UI.RadDigitMaskPart(),
                               new Telerik.Web.UI.RadDigitMaskPart(),
                            new Telerik.Web.UI.RadLiteralMaskPart(') '),
                              new Telerik.Web.UI.RadDigitMaskPart(),
                              new Telerik.Web.UI.RadDigitMaskPart(),
                               new Telerik.Web.UI.RadDigitMaskPart(),
                               new Telerik.Web.UI.RadLiteralMaskPart('-'),
                               new Telerik.Web.UI.RadDigitMaskPart(),
                              new Telerik.Web.UI.RadDigitMaskPart(),
                               new Telerik.Web.UI.RadDigitMaskPart(),
                               new Telerik.Web.UI.RadDigitMaskPart()
                             ];
                             rtxtNumber._length = 0;
                             rtxtNumber._setMask(masks);
                             rtxtNumber.clear();
                             break;
                         default:
                             rtxtNumber.set_enabled(false);
                             rtxtNumber.disable();
                             break;
     
                     }
     
                 }
     
            
                 //]]>
            </script>
        </telerik:RadScriptBlock>
     
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager runat="server" ID="RadScriptManager1"/>
     
         <telerik:RadComboBox ID="rcbType" runat="server" Label="Order Number or Phone Number?"  CausesValidation="false"
            Width="100%" Height="200px" EmptyMessage="Select one" AllowCustomText="true"  OnClientSelectedIndexChanged="rcbType_ClientIndexChanged"
                >
            <Items>
                <telerik:RadComboBoxItem Text="Order Number"  Value="0" />
                <telerik:RadComboBoxItem Text="Phone Number"  Value="1" />
            </Items>
        </telerik:RadComboBox>
            <br /><br />
            <telerik:RadMaskedTextBox ID="rtxtNumber" runat="server" Label="Enter Order Number" Width="100%" Enabled="False" Mask=""/>
        </div>
        </form>
    </body>
    </html>

     

     

  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 16 Jun Link to this post

    Hello,

    Can you please set the RadMaskedTextBox RenderMode to Auto so that it retrieves to Mobile when running on mobile devices and see how it goes?

    Regards,
    Maria Ilieva
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Condorito
    Condorito avatar
    38 posts
    Member since:
    Mar 2009

    Posted 16 Jun in reply to Maria Ilieva Link to this post

    Hi Maria, I modified the logic so that there are now two input fields, one of which is hidden based on what they select under the dropdown.  a RadTextbox for the Order Number, and the same MaskedTextBox I had earlier for the phone number. This appears to have solved the issue under iOS, but the behavior under Android is the same:

    One needs to press the same key twice initially in order to get anything in the maskedtextbox, and then if hitting the delete button the cursor jumps all over the place. I no longer have any additional JavaScript modifying this object's properties so that shouldn't be the issue:

    <telerik:RadMaskedTextBox  Mask="(###) ###-####" runat="server" RenderMode ="Auto" ID="rmtbNumber"  Width="100%" TextWithLiterals="() -" />

    Thank you.

  5. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 21 Jun Link to this post

    Hello,

    Can you please clarify what the exact markup you have is and what exaction should be taken for replicating the issue? Thus we can recreate the problem locally and advise you further.

    Regards,
    Maria Ilieva
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  6. Condorito
    Condorito avatar
    38 posts
    Member since:
    Mar 2009

    Posted 24 Jun in reply to Maria Ilieva Link to this post

    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
       
     
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager runat="server" ID="RadScriptManager1"/>
                   <telerik:RadMaskedTextBox Mask="(###) ###-####" runat="server" RenderMode="Auto" ID="rmtbNumber" Width="100%" LabelCssClass="" TextWithLiterals="() -" />
     
       
        </div>
        </form>
    </body>
    </html>

     

    This is all I have. I access this with a Samsung Galaxy S5 using Chrome 51.0.2704.81 When I attempt to enter a value, the first key press puts the cursor before the first field in the masked text box, the second key press actually puts a number in it.

  7. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 29 Jun Link to this post

    Hello Condorito,

    I tested the provided code and see what the result on my side is:
    http://screencast.com/t/vnh3ql9dxazo

    Let me know if I'm missing something.

    Regards,
    Maria Ilieva
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  8. Doyle
    Doyle avatar
    6 posts
    Member since:
    Feb 2012

    Posted 23 Nov in reply to Maria Ilieva Link to this post

    In line with this...

    I have a page that works perfectly on all browsers that uses a masked textbox for a phone number. The mask is (###) ###-####.  This mask is applied when the page loads (it is running in ASP.NET)

    When I bring the page up on my Samsung S6 Edge and type a number into the field, the first two digits appear, the third digit replaces the first two and then the rest of the digits appear in random places in the textbox.

    Strangely, the same page brought up in other Android devices works correctly (not that I have checked it out for all possibilities)

    I have set the RenderMode to "Auto" - no change.

    Does anyone have a clue where I can look next?

  9. Doyle
    Doyle avatar
    6 posts
    Member since:
    Feb 2012

    Posted 23 Nov in reply to Doyle Link to this post

    Found the answer - it is the 'Predictive Text' option on the phone keyboard.

    So - next issue.... Is there a way we can set an ASP.NET page select Telerik RadMaskedTextBoxs to only show the Numeric keyboard on the phone?  We are loading these pages into an iFrame in a Phone App.

  10. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 5 days and 20 hours ago Link to this post

    Hi Doyle,

    I am afraid that there is no built-in way in the MaskedTextBox to force the mobile browser to show the numeric keyboard. The reason for this is that the input can contain non-numeric characters by default.

    With that said, if you would like to force a numeric keyboard you would need to use custom logic. Please examine the following thread that discusses similar behavior.



    Regards,
    Viktor Tachev
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017