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

MaskedTextbox that changes mask using javascript behaving strangely on mobile browsers

8 Answers 36 Views
MaskedTextBox
This is a migrated thread and some comments may be shown as answers.
Condorito
Top achievements
Rank 1
Condorito asked on 13 Jun 2016, 07:01 PM

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>

 

 

8 Answers, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 16 Jun 2016, 12:45 PM
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.
0
Condorito
Top achievements
Rank 1
answered on 16 Jun 2016, 01:19 PM

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.

0
Maria Ilieva
Telerik team
answered on 21 Jun 2016, 10:36 AM
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.
0
Condorito
Top achievements
Rank 1
answered on 24 Jun 2016, 03:23 PM
<!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.

0
Maria Ilieva
Telerik team
answered on 29 Jun 2016, 12:28 PM
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.
0
Doyle
Top achievements
Rank 1
answered on 23 Nov 2016, 08:13 PM

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?

0
Doyle
Top achievements
Rank 1
answered on 23 Nov 2016, 10:00 PM

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.

0
Viktor Tachev
Telerik team
answered on 28 Nov 2016, 11:59 AM
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.
Tags
MaskedTextBox
Asked by
Condorito
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
Condorito
Top achievements
Rank 1
Doyle
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or