Number-only inputs aren't so straight-forward

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[veni_vidi_victorian]

Double it and pass it to the next back-end developer

[MysterX]

and never forget "e" is a valid numbersymbol.

I had a wonderfull bug a half year ago with a sudden apperance of a HUGE exponent number. 😅

[MarcelRobitaille]

Credit card numbers are not numbers, just like phone numbers are not numbers. It only makes sense to treat it as a number if it makes sense to take half of it. If you ask for half of someone's credit card number, they will probably give you the first 8 digits, not divide it by 2. It's a string.

[joshuafountain]

Waiting for an npm package with 7 dependencies and 4 files to fix numeric inputs

[bramus]

In Chrome, <input type="number"> also accepts the scientific notation, e.g. `1e7` … technically correct, but yet another reason to stay away from it.

[ravel]

In short :
" fed up with js? We've got your back ! Here's some css"
" fed up with css? We've got your back ! Here's some js"

[rahulr]

Remember to allow minus and dot if you need it in the number

[Koroistro]

[0-9]+ as a regex also prevents writing dots or commas which would prevent inputting decimals, so be careful when using that kind of filters.

Ideally you want to come up with consistent standard rules for your fields and reuse them.
Numbers can come in many flavours, integers, floats, percent values, scientific notation etc

[MrBleb]

I’ve been taking a boot camp for the past month and the information you give out makes me SO excited to learn more about web development. Thank you for all these shorts, and all the awesome videos you have!

[BrunoNeureiter]

A short with a CodePen. Insanity. THANKS!

[mwmm]

The inconsistencies with input between browsers and platforms really bugs me, never quite understood why datetime never really works but datetime-local does on some browsers even though it is a newer standard

[stillready]

I was just searching for that short, because now I'm working on a form and I could not quite remember all of that. Pretty neat :)

[DTUSEM]

Read UK gov web design specifications. Very good specification

[mtime]

Saving numbers as Text/Varchar in dbase is very good I say. For example when storing pin numbers for debit cards they may give numbers starting with zero, if we have used numbers the initial zeroes would have neglected. So it is advisable to go with text in such cases.

[Linuxdirk]

Don’t forget that no data entered in the front-end should be given to the back-end without proper validation (input type hints and clientside checks are not proper validation).

[theamazingsolt]

It also adds a wonky scroll handler. Good tip

[kc-epyx]

Your content is so helpful Kev, keep going & thank you

[sexntuna]

I always just use type=tel. Shows number keyboard only without the up/down arrows.

[silentshadow]

I always want to save these videos, but realize if I did I would probably save every single Kevin Powell video I came across.

[fadge]

Omg Kevin I love you! Literally been thinking about this problem for the past week