Cursor moves to end of text on mobile devices when using Input Mask

  • resortvacations
    Asked on April 7, 2016 at 5:02 PM
    I have been trying everything I can think of for the past few days to find a way to resolve this and have been extremely frustrated. I have tried it on every browser I can think of. In my case, I am only having the issue on mobile devices- Windows tablet and Android tablet. I have tried Chrome, IE, Edge... Same thing. It occurs for some reason when I am trying to use the telephone number with input mask validation. I always need to manually place the cursor back at the beginning of the text input field. And if I don't place it after the left parenthesis for the area code mask, it prepends the entry for the phone number and forces the entire entry to the right. I don't have issues like this with the desktop computer environment, only mobile. Thank you for your time.
  • Boris
    Replied on April 7, 2016 at 5:28 PM

    I've tested your form named OPC Form with mobile devices and emulators, and I couldn't replicate the issue you were describing - the cursor started from the beginning of your Phone field when the field was clicked on.

    Google Nexus 9:

    Cursor moves to end of text on mobile devices when using Input Mask Image 1 Screenshot 20

    As can be seen from the above animation, I've also tried clicking outside of the field and back onto it to see where the cursor will start, and every time it started at the first unfilled character of the Primary Contact Cell field.

    Based on what you described, it seems that you have tried it on multiple devices and have had the same issue. Can you please confirm it that issue is still present on your end?

    If so, can you please tell us which form exactly you are working on, and which exact field is presenting this issue? In addition to the form and field, please also let us know one example device you are experiencing this issue with, so that we can try and replicate it from such a device.

    We'll be happy to check if further from our end, but so far it seems to be working fine on your form OPC Form with field Primary Contact Cell.

    We look forward to your response with more details. Thank you.

  • resortvacations
    Replied on April 7, 2016 at 6:11 PM

    Thank you for your response. Okay, I am running into the issue on a Dell Venue 11 Pro tablet. One thing that was worthy of mentioning is that I don't encounter the error when I am not running in 'Tablet Mode' in Windows. However, the other side of that problem is that when I disable 'Tablet Mode', the on-screen keyboard doesn't function properly. For example, it doesn't resize the browser when it is in fullscreen mode to accomodate the on-screen keyboard. Since this is a kiosk-type environment, everything has to be airtight. Thank you.

  • Kevin Support Team Lead
    Replied on April 7, 2016 at 8:10 PM

    I have tested your form and the same as my colleague I was unable to find the issue, I have tested using an emulator and the issue is not there, unfortunately I could not test using the device that you are saying; however, I tested using a tablet running Android 4 and it worked the same, the issue is not present:

    Cursor moves to end of text on mobile devices when using Input Mask Image 1 Screenshot 20

    The only thing that I can think is that the Javascript code used on this function was not recognizing that there were numbers on the field and it was moving the pointer to the beginning of the field. 

    Regarding to your second problem, I'm not sure if understood, seems like this is when enabling or disabling the "Tablet Mode" on Windows, when you do this, is your form not showing properly? 

    Please, do let us know and we will take other look to your form. 

  • resortvacations
    Replied on April 8, 2016 at 1:09 PM

    Cursor moves to end of text on mobile devices when using Input Mask Image 1 Screenshot 20

  • resortvacations
    Replied on April 8, 2016 at 1:18 PM

    Actually, I had the same problem whether or not I enabled tablet mode. The problem seems to be inconsistent, but 95% of the times I tried it, the same thing happened. I thought it was possibly a result of not waiting for the page to load completely to tap the text box area, but that doesn't seem to matter, either. The only way I can even fill out the fields is if I specifically tap precisely after the first parenthesis. And if I don't, the cursor will push the entire input mask forward. It is a mess. Thank you so much for your assistance, this is a crucial matter for my situation and it is make or break, completely contingent upon my providing a prompt solution for this nightmare.

  • Welvin Support Team Lead
    Replied on April 8, 2016 at 2:33 PM

    Please try switching the phone number field to a textbox then enable input mask, check if it does the same thing.

    Cursor moves to end of text on mobile devices when using Input Mask Image 1 Screenshot 20

    We need to determine whether it's an issue specific to the phone number field only or both while input mask is used.