How to make numpad behave like standard decimal input

Number entry & pickers
1

The default behaviour for the number pad allows the user to achieve a basic decimal value (like 7.5 for example) but it’s awkward because it doesn’t allow the user to type in the decimal at all and it requires the user to type 750 in order to achieve 7.5.

I found this example: https://demo.mobiscroll.com/jquery/numpad/variablefraction# which achieves what I’m looking for but that seems like an awful lot of code just to make it behave like a normal decimal keypad. Do I really need all of that code, or is there an easier way to achieve what I’m looking for?

2

Hi @Vincent_Wansink :wave:

At the moment the Variable Fraction demo is the only solution if you want to use decimal input.

3

Hi Zsombor,
And how to use plus/minus sign with these example

5

Hi @Daniel_Diez_Menendez :wave:

Your question was answered here: https://forum2.mobiscroll.com/t/numpad-how-to-use-plus-minus-sign-with-variable-fraction-demo/625/2?u=zsombor.

6

Is it still the case that there is no way to allow the user to press the decimal key when entering a number into the numpad control?

7

Hi @Jesse_Herrera :wave:

Starting from version 4.10.0 there is a new entryMode setting that supports decimal value entry! Check out this Variable Fraction demo with entryMode: 'freeform' setting! :wink:

8

I tried the demo in Chrome, Edge and Firefox and I was not able to enter a decimal using the keyboard when typing my number. I still had to tap the decimal button on the numpad control.

9

Hello @Jesse_Herrera :wave:

Sorry, I think I misunderstood your question!
I looked into it and yes, you can’t enter a decimal (.) using the keyboard.
This should be a bug at Numpad, so I just created a bug report and added your voice to it. Thanks for the heads up! :+1:
At the moment the only solution would be to use the Tab , Shift + Tab to navigate between buttons, Space to press buttons. Here you can find more information about keyboard support: Accessibility features of Mobiscroll components for various frameworks.

10

Hello @Jesse_Herrera :wave:

It’s Zsombor from Mobiscroll team :grinning:
I just wanted to follow up with you regarding this bug and let you know that we fixed it in version 4.10.3.
You can download the latest version from https://download.mobiscroll.com.
If you were using the CLI or installed from npm, an npm update will do the job as well.
Also, you can see everything that we introduced in 4.10.3 here: Release notes and release history for Mobiscroll.

11

Awesome! Looks good so far in my testing. Thanks!

12

Is there some reason it would be reacting differently when I am setting the value in the new version of the numpad to zero? For some reason in my code now when I am setting the value of my numpad to zero and triggering the change() event the zero is not displaying and it is acting as if the value is null or empty. I am doing this $(“numpad”).val(0).change(); and when I try to get the value that was just set I am getting an empty string instead of a zero. When I remove " preset: ‘decimal’ " from teh options it works again. When I add it back I get the strange behavior.

13

Hi Jesse, this looks like a bug.
We’re investigating it and if there’s a fix needed, we’ll add it to the next release.