Masked Input Widget: It should open directly the number keys on mobile

  • Profile Image
    BetterWealthSolutions
    Asked on July 10, 2019 at 06:37 PM

    I am using the Masked Input widget to turn whole numbers into currency (10000 = $10,000), however, on mobile the alpha keyboard pulls up initially, then you have to select the numeric keyboard. This seems like an unnecessary two step process. Is there a way to set this widget so only the numeric keyboard opens on mobile?

    Thanks!

  • Profile Image
    EltonCris
    Answered on July 10, 2019 at 08:25 PM

    I agree with you. When input mask widget is exclusively set to allow numbers only, it should open directly the number keys on mobile. Example:

    Since this isn't yet possible, I will escalate this to our developers. We will let you know once this is implemented.

  • Profile Image
    BetterWealthSolutions
    Answered on July 10, 2019 at 08:31 PM

    Awesome, thanks! In case it helps, I have got this to work while testing in jsfiddle by adding this code to HTML form input fields:

    inputmode="numeric"

    I would imagine that this would be a pretty easy toggle to implement.

    Thanks again

  • Profile Image
    EltonCris
    Answered on July 10, 2019 at 09:52 PM

    You're right, it's related with the input type. Numeric input type should be used here. I have noted that on the ticket. Thanks

  • Profile Image
    hayk
    Answered on July 12, 2019 at 09:07 AM

    We are sorry for the inconvenience caused to you. We have updated the widget and now the widget will automatically switch to numeric keyboard on iOS devices (no need to do it manually anymore) and it opens alphanumeric keyboard on Android phones. Thank you for reporting the issue.

    P.S. inputmode="numeric" attribute is not compatible with some popular browsers.

    Regards,

    Widgets Team

  • Profile Image
    BetterWealthSolutions
    Answered on July 12, 2019 at 10:11 AM

    Hi there,

    Thank you very much for taking care of this for iOS devices! Can we also have the numeric keyboard open for Android too? We want to provide a consistent experience for all of our users. It's still takes an extra step for Android users to access numbers. I have a stock Pixel 2 and this is the keyboard that opens when you first click in the widget field:

    1562940143android.png
    It should look like this (bad photoshop below ^_^):

    1562940575number keyboard.PNG

    I would forever be grateful if this change could be made as well :)

    Thank you very much!

    Alex

  • Profile Image
    Welvin
    Answered on July 12, 2019 at 11:09 AM

    Hi Alex,

    Thank you for the feedback. Our widget team is a recipient of this thread, so I'm sure they receive your reply. What I don't know yet if this is possible. Maybe, yes but with a few changes in the coding to our backend. We will keep you updated here. 

  • Profile Image
    hayk
    Answered on July 18, 2019 at 06:37 AM

    Sorry for the late response, we have updated the widget some days ago and now it displays a numeric keyboard on all phones.

  • Profile Image
    BetterWealthSolutions
    Answered on July 18, 2019 at 10:39 AM

    Hi Hayk,

    Is there something on my end I need to enable to make this work? I just tested on my phone (Stock Android Pixel 2 on Chrome browser) and it is not pulling up the numerical keyboard.

    Thank you,

    Alex

  • Profile Image
    BJoanna
    Answered on July 18, 2019 at 11:59 AM

    I am unable to replicate the issue on my Samsung Galaxy A5 on Chome browser. A numeric keyboard is loaded by default.

    Please try to clear your cache & cookies and try again. If possible test it on some other Android device as well.

  • Profile Image
    BetterWealthSolutions
    Answered on July 18, 2019 at 12:52 PM

    You were right, I cleared cache and now I see the numeric keyboard. This is awesome! Thank you!

    There are only a few more inconsistencies I am noticing:

    1) The ability to tab to a widget field is not currently possible. When tabbing is available, the blue button on the lower right looks like this:

    1563468251example1.png 

    When you press this button, tab turns into enter on Name 1:

    1563468335example2.png

    If you press the button now, the form will submit without tabbing over to Value 1.


    2) When you focus on a widget field, there is no yellow highlight around the border of the field like the example text fields above. In addition, there appears to be a small border within the widget field box. Can these be corrected with CSS?

    1563468653example 3.png

    Thank you very much for taking the time to work on this with me! In the end, I know this will help provide a great experience for our users :)

    Alex

  • Profile Image
    Welvin
    Answered on July 18, 2019 at 02:22 PM

    Hello Alex,

    You are welcome. That is great to know.

    I have created a new thread for the new issue you raised here. Here's the link https://www.jotform.com/answers/1896094