Number pad keyboard for Number Inputs

Queries and Resources
1

I'm trying to create a simple app that will be mostly used on mobile devices (primarily iOS). The number inputs have the type="text" instead of type="number". If my understanding is correct, Android devices will display the number pad style keyboard when the inputmode="numeric" (which they are already listed as numeric), but this is not true for iOS devices.

How do I change the type to equal number, or add in a pattern attribute like pattern="[0-9]*"?

I've attempted to use custom JavaScript entered through the [Scripts and Styles] menu item, but haven't had any luck. My function fires appropriately, but the attributes are not added to the input tags.

With the standard-issue keyboard coming up, the number inputs are clunky and not very user-friendly.

Thanks in advance for your help,
Chris

2

Hello! Thanks for writing in. Are you making a form or using some type of component that has a different input than expected? Could you share a screenshot of your app and the setup? Especially anywhere that has the type= like you mentioned above. Thank you!

3

Hello again!

Just wanted to follow up and see if you could share a little bit more about your app. Any screenshots of where the input types are giving you trouble would be a great help!

John

4

Hi John,

Thank you for your patience and checking in. The app that I'm working with is a simple form for checking and changing inventory status. I'm using a stock number input component to capture the SKU that the user is checking or changing the status of. On a mobile device, having the standard qwerty keyboard activate upon focusing on this input is cumbersome. Having the number pad keyboard activate would be much more user friendly.

This is what I'm seeing when inspecting the element:

<input id="SKU--0" autocomplete="off" placeholder="Enter value" inputmode="numeric" aria-roledescription="Number field" autocorrect="off" spellcheck="false" class="_vrlvt _2gurE" type="text" value="0">

My understanding is that if the type="text" is changed to type="number" the number pad keyboard will be activated. This is generally not a desirable default setting as the number pad keyboard does not provide a decimal, dash, or the ability to navigate to a normal keyboard. For this use case, however, the only input will always be numeric digits 0-9. Adding in a pattern attribute would also be helpful for having this format properly.

I have attempted to add in custom JavaScript to make the change and addition of the properties/attributes.

$(window).ready(function() {
  
  console.log("***CUSTOM FUNCTION***");
  
  $("input#SKU--0").prop('pattern', '\\d*');
  $("input#SKU--0").prop('type', 'number');
  
});

This script is executing as indicated by the note being seen in the log, but the attributes are not being applied.

I am attaching a screenshot of the app on a iOS mobile device. The number input that is in question is the one labeled MEMS#.

Thank you in advance for your help,
Chris

IMG_3383|231x500

5

So, I've done some fiddling with this and I'm seeing some interesting behavior. I've tried three different configurations in JSFiddle to see what would happen – https://jsfiddle.net/5gj3erob/4/

  1. Number input with pattern="[0-9]*"

  2. Number input with inputmode="numeric" – this is the default for the Retool App that I've already tested.

  3. Number input with type="number"

In #1 and #2, I have type="text" which is the default attribute. When the pattern and inputmode are not specified, they are omitted.

#1 and #2 behave as expected and as desired. #3 does not display the number pad keyboard, but instead the standard keyboard with the number section visible. I find this interesting, because with the code directly copied from Retool App that I've been testing, the desired number pad keyboard is activated on the JSFiddle, but when running the Retool page, it doesn't.

Are you aware of anything that might be keeping this from activating? Is there anything within the Retool backbone that was intentionally added to prevent the different keyboards from activating?

Thanks,
Chris

6

Hey @jSims,

Any luck looking into this at all? I still haven't been able to figure this out on my end.

Thanks,
Chris

7

Hi @csMEMS :wave:

I've been looking into this a bit and haven't had much luck so far. It looks like the input brings up the numpad properly when used in a custom component, might that be helpful?

8

Hi @Kabirdas,

Thanks for the reply. I appreciate the suggestion. I was able to find the custom component tutorial in the docs, but I'm not experienced with React.js. I'll try to go through the tutorial and see what I can manage to setup. I'll post an update when I get the chance.

Thanks,
Chris