[DONE] Displaying number attribute in html

I am building an application that relies extensively on number inputs from users. Currently there are no number input components in Anvil that generates html with type number. Has anyone found a viable workaround, so users on mobile devices will be presented with a number keyboard on specific text fields, instead of the standard keyboard, which does not contain numbers?
I know it is on the feature request list (Text box Type = “number” ability?) but hope I can find a solution until the feature is put into Anvil. Otherwise my users will be shifting between keyboards on many inputs.

You might be interested in this:

It provides not only number entry, but validation (sanity-checking). That is, not only can you get a value of data-type Number, you can also ensure that the Number is sane, by your own criteria.

I’ve tried to copy the app from the link that is given in your post about the framework but the link is broken. It looks promising but could you post another link so I could inspect?

I see what happened. This should do it:
https://anvil.works/ide#clone:7SAMSSQEYNCR3LG3=KETE3T5PP67TFJ4GDKW4FG4X

It’s been awhile since I looked at it, but it should give you the basics.

Thank you for your link. Your framework definitely solves some data validation in an easy way - it will surely come in handy for me. However, what I am particularly interested in is finding a solution to have type=“number” in some if the input-tags in the HTML of the presented form in the client browser - especially on mobile/tablets. Users on tablets and mobile devices are generally used to being presented with a default keyboard that has a direct link to the type of data that is entered. Mobile browsers require input type=“number” to display number keyboard by default.

A solution to this may involve writing some custom javascript that changes the attribute of the input tag from type=“input” to type=“number” on page load. However, I am not well acquainted with javascript and I am not sure how I can let the javascript code differentiate between the input boxes that are supposed to be number fields and those who are supposed to remain ordinary text fields (e.g. for typing names, addresses, etc.).

Hi there,

This is an excellent request! In fact, it was so sensible that we went ahead and built it. As of our next release (later this week), the TextBox component will have a type property that can be set to "number", "url", "telephone" or "text".

In addition, for users requiring numerical input, I can confirm that when the type is set to "number", you will read a numerical value from the text property (or None). This will make data binding to numerical columns in data tables much easier.

(I have moved this to the Feature Requests forum.)

1 Like

Hi Meredydd,

I was wonder, how to display a floating point value like 0.0056 in the result text box. I am not a HTML savi person to check other attributes. Could you please help?
Best Regards,
Vasanth

Hi Vasanth,

Could you please explain in more detail what you’re trying to do? Perhaps you could share a clone link for an app that illustrates your problem? (To share an app, go to the gear menu image in the Anvil editor, then choose Share app and then Share your source code and data.)

Here are some more tips on providing information about your problem.