react-number-format icon indicating copy to clipboard operation
react-number-format copied to clipboard

Published 20 hours ago • verified publisher icon s-yadav

Add support for type 'number'

Open RavenousPett opened this issue 5 years ago • 10 comments

I.e. so the input type = 'number'

Allowing the number keyboard to show on mobile:

IMG_5360

RavenousPett avatar May 09 '19 19:05 RavenousPett

I would also like this!

However word of caution setting type="number" might cause a lot of problems. See: http://bradfrost.com/blog/post/you-probably-dont-need-input-typenumber/

Setting inputmode for modern browser and falling back to the pattern attribute would show a number keyboard on mobile devices without the usability issues of type="number"

SamKirkland avatar May 20 '19 18:05 SamKirkland

Is there any progress on supporting type="number?

aneurycasado avatar Sep 05 '19 20:09 aneurycasado

type='tel'

Seems to have such side effects.

redblue9771 avatar Oct 04 '19 09:10 redblue9771

@redblue9771 type='tel' does not include a decimal on the keyboard on iOS Safari.

brianpmaher avatar Oct 07 '19 19:10 brianpmaher

This is essential for an input formatting library. If input number types are supported so are their attributes, min and max being especially useful in the case where the library doesn't provide these forms of validation as a feature. Rejection of non-numeric numbers are built-in as well, browsers may also provide stepper arrows for incremental inputs.

UncaughtTypeError avatar May 24 '20 17:05 UncaughtTypeError

Another problem with the number type I stumbled upon is the behavior in FF. When the type is number, you can type in non numeric characters, but then just about nothing happens. So, you get ugly things like:

FF number problem

halcwb avatar Jul 05 '20 19:07 halcwb

To get a different keyboard without changing the type you can use the inputMode attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

R4VANG3R avatar May 28 '21 13:05 R4VANG3R

@R4VANG3R there is no [inputmode] that works like type='number' keyboard on iOS https://codepen.io/Grawl/pen/RwpEKzQ

decimal have , button but I want . button

Grawl avatar Jun 15 '21 08:06 Grawl

UncaughtTypeError

This please! If type="number" is not supported. Is there a workaround to be able to use the text field with min/max validations? 🤔 I'm using this field in a form and only want to allow values greater than 0. The isAllowed prop is not robust enough and seems to be causing issues.

fulcrumlabsio avatar Feb 16 '22 05:02 fulcrumlabsio

UncaughtTypeError

This please! If type="number" is not supported. Is there a workaround to be able to use the text field with min/max validations? 🤔 I'm using this field in a form and only want to allow values greater than 0. The isAllowed prop is not robust enough and seems to be causing issues.

Could you elaborate on the issues you experienced with isAllowed?

vilbergs avatar Sep 14 '23 06:09 vilbergs