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><html xmlns="http://www.w3.org/1999/xhtml"><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
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
Rank 1
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.
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
Rank 1
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><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.
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
Rank 1
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?
Rank 1
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.
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