Number-only inputs aren't so straight-forward

Подписаться 913 тыс.

Просмотров 748 тыс.

50% 1

Code: codepen.io/kevinpowell/pen/dy...
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 RU-vid channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Опубликовано:

7 фев 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 262

@KevinPowell Год назад

Code: codepen.io/kevinpowell/pen/dyjwWEY

@TheRealZitroX Год назад

why not github

@Smurfis Год назад

@rohit45kashyap 8 месяцев назад

does the trick.

@connorskudlarek8598 6 месяцев назад

Which is more suitable to accessibility though?

@veni_vidi_victorian Год назад

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

@kristian9268 Год назад

Hey Backend Dev? Can I get an Angel Shot

@AnwerDulia Год назад

Double it and pass it to the sys admin

@coderswat Год назад

@@kristian9268 sure

@la9955nis Год назад

@@kristian9268 who

@Maniac-007 Год назад

Would you rather have a gay son or a thot daughter?

@MysterX79 Год назад

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. 😅

@evanjoyal9540 11 месяцев назад

omg. so thats why my number field was bugged. sooo annoying

@ChibiBlasphem 5 месяцев назад

Oh nice to know, but that's also why we should have validation on input so it can't go higher than a max

@TylerFurrison 5 месяцев назад

I gotta test this with some code I whipped up in Python... If it treats e like a number symbol

@MysterX79 5 месяцев назад

@@TylerFurrison Back in August'21 I wrote a note to my coworkers about this issue. My suggested solution looked like that ...

@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.

@poseidonsmafia1160 Год назад

That is such a creative way to think about it. Making a difference between a number and a sequence of single numbers.

@capsey_ Год назад

@@poseidonsmafia1160 there is a word for a single number - digit!

@poseidonsmafia1160 Год назад

@@capsey_ at the top of my tongue xD thank you!

@snailedlt Год назад

So it's an array of numbers?

@capsey_ Год назад

@@snailedlt array of digits (because one number can consist of many digits and even symbols), or more accurately, sequence of digits

@joshuafountain 11 месяцев назад

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

@mthalter 6 месяцев назад

Would

@DEBO5 5 месяцев назад

You’re more than welcome to spin something up from scratch but who has time for that?

@bramus Год назад

In Chrome, also accepts the scientific notation, e.g. `1e7` … technically correct, but yet another reason to stay away from it.

@Zooiest Год назад

Probably uses the built-in Number conversion, and if so, practically any JS numeric literal would be considered valid (notably prefixed literals, special float numbers like NaN and Infinity, and so on)

@rahulr9539 5 месяцев назад

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

@DTUSEM Год назад

Read UK gov web design specifications. Very good specification

@ThomasSselate Год назад

Web development is a nightmare

@oliveryt7168 7 месяцев назад

What is not?

@trenwar 6 месяцев назад

Sounds like skill issue

@Joe-SoftwareEngineer 6 месяцев назад

Web development is fun

@pedrovsn 6 месяцев назад

No it is not. You just gotta study and practice a lot for mastery

@trenwar 6 месяцев назад

@@TollyH agree, i actually don't really like web programming (only the front end tho) but that's where most of the money is, also i do back end so i guess it's less confusing than front end

@ravel1274 2 месяца назад

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"

@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

@MrBleb 7 месяцев назад

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!

@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).

@KevinPowell Год назад

100%! This is just for a better UI, nothing here about validation 🙂

@Linuxdirk Год назад

@@KevinPowell "Front-end is a warzone! A good looking one, though ... but trust no-one, especially not your users" 😆

@danielegvi Год назад

You’re saying front-end data cannot given to the back-end without validation, but don’t you need to give it to the back-end do the validation in the first place?

@Linuxdirk Год назад

@@danielegvi User input validation for me isn't part of the back-end. The back-end is the database, the storage, the business logic, etc.

@danielegvi Год назад

@@Linuxdirk If validation isn’t part of the back-end, and it isn’t part of the front-end, then where is it?

@stillready6405 7 месяцев назад

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 :)

@kc-ep8yx Год назад

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

@BrunoNeureiter 4 месяца назад

A short with a CodePen. Insanity. THANKS!

@theamazingsolt Год назад

It also adds a wonky scroll handler. Good tip

@kenanhamzic2346 Год назад

Thank you for all your tips videos

@fadge316 Год назад

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

@silentshadow867 10 месяцев назад

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

@XDBjoernXD Год назад

Since I know your channel I feel more motivated to learn CSS. You help me alot. Thank you and have a nice day.

@lxbdr Год назад

THANK YOU! haven't tried your solution yet, but I hate type="number" fields as with an Apple Magic Mouse I tend to accidentally scroll over them changing the value...

@immortalsun 6 месяцев назад

This is pretty useful! Thanks!

@prhasn 11 месяцев назад

Excellent tip. Thanks

@thequickcode5144 5 месяцев назад

super useful thanks

@giviko1709 Год назад

I actually needed this

@Koroistro 4 месяца назад

[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

@TheScriptPunk 5 месяцев назад

Use 2 input fields. In key press, dispatch the same event to the number only input, and take the value, set the value of the main input field

@amithbhagat Год назад

Thanks 🙏 learnt something new.

@Innengelaender Год назад

I've literally just had this issue in react and it drove me crazy because i didn't know it wouldnt fire the onchange event if it wasn't a numeric value but still display the changed value

@jixster1566 6 месяцев назад

How has this not been abstracted

@alexnezhynsky9707 Год назад

Thanks!

@JMIK1991 Год назад

Yes, did something like this few years ago and Safari was a pain.

@Gascha102 7 месяцев назад

thank you so much

@JhitsfanfromPH 4 месяца назад

the validation happens in the backend anyway 😂😂

@yashmmee Год назад

I learned all this in hard way few days ago 🥴

@ChikaRose-qj5nm Год назад

I love ur style for css creation, and love to follow your thoughts. Great thanks. - GMB Uneke Martin S.

@Lampe2020 4 месяца назад

Well, when I have an input with type=text and pattern= I can enter whatever characters I want but on submitting the form it focuses the incorrectly-used field and tells me to "Please use the specified format". I optimize my own website purely for Firefox (I have one Chrome-specific fix in there, but everything else is basically unsupported on non-Firefox browsers).

@tamas5931 4 месяца назад

understatement 😅

@bobbymannino Год назад

My mind is litterly blown

@ieatsoap6389 5 месяцев назад

YEAH!!!!!!!

@voidbinary Год назад

Wouldn't it be smarter to get rid of the nested EventListener of input and use the preventDefault method to prevent input from being entered? The else then becoming beforeValue = el.value

@fafutuka 2 месяца назад

Things get out of control really quickly😂

@DEBO5 5 месяцев назад

Anytime you have even a simple contact form that needs to be shipped to production there will need to be quite a few different security features like csrf token, client side and server side validation and sanitization, probably a google captcha and a few other things like Content Security Policy and anti click jacking scripts, etc.

@davejackson88 7 месяцев назад

nice work so Interesting

@paul_wiggin 8 месяцев назад

decades of web-development, new browsers.. and here we are - discussing how to make a simple numeric input

@MB-zj3er Год назад

Funny, I just did this the other day. 👍

@code.cracking Год назад

Great man

@christopherjung2697 Год назад

Thx!

@sexntuna Год назад

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

@seanthesheep 6 месяцев назад

Hmmm, I feel like this could be semantically confusing because it could suggest phone numbers when it shouldn't. In your experience, does it work well with browser auto fill and screen readers?

@sexntuna 5 месяцев назад

@@seanthesheep doesn’t autocomplete”off” takes care of that?

@seanthesheep 5 месяцев назад

@@sexntuna mobile keyboards might still suggest phone numbers in a non-intrusive chip

@MinorTom 5 месяцев назад

@@sexntunaautocomplete="off" is ignored by some browsers.

@fullfungo 4 месяца назад

Do you not care about accessibility?

@mohamedelaminechafiki4558 4 месяца назад

I think I'll go with the Css method

@MatheusHP Год назад

amazing!!

@blal Год назад

thanks

@nsshurtz 6 месяцев назад

Android definitely depends on which keyboard is configured. iOS probably as well, but they're more restricted on what keyboards can actually do. Also, on Android, keyboards can (but are highly encouraged not to) completely ignoring the IME hints.

@AndyClements 8 месяцев назад

Better still be checking that on the back end. Just because the pretty page limits it doesn't mean I can't send other data.

@mvargasmoran 5 месяцев назад

I reject every property when they don't work, in my head pattern doesn't work.

@pepito7666 7 месяцев назад

Bro. Videos like yours, Will be unnecesary, due yo ChatGPT. Thank God by your gift to humanity, ChatGPT.

@oliveryt7168 7 месяцев назад

How did you know that I.... love CSS!?

@scyfox. Год назад

Try to input floating numbers and everything goes to hell because decimals with comma aren't working at default

@forno_nicolas Год назад

Yeah bro I now create my own keyboard component...

@wesker0143 Год назад

What about use regular expression to validate the input value? I think it's more easy 🤔

@ImHansana123 3 месяца назад

You probably need to put this into stack overflow.

@SXsoft99 6 месяцев назад

Menwhile me doing some backend form validation and that's a wrap, hiding the number controls with css isnt that hard since tou copy paste it from stack overflow Bigest problem is when you have to deal with digits and some countirs use "." While others use "," and viceversa for thousand separator because accountants want to reinvent math

@alexus8610 Год назад

How does this affect the experience in terms of accessibility?

@seanthesheep 6 месяцев назад

This is a valid concern. However, gov.uk promotes it and they are big on accessibility, so I assume they've taken it into consideration. I assume that screen readers don't really announce what the limited set of characters are based on the HTML, and instead leave it up to the input's label

@zvagolskyaleksey168 Год назад

How about to use min/max value?

@manojht8036 6 месяцев назад

You can replace value in place to take only number ... and replace text with empty string .

@namenamington 6 месяцев назад

These aren't normal numbers, these are *numeric* numbers.

@justingolden87 8 месяцев назад

You can type dash "-" period "." and "e" in number inputs. Which CAN all be valid numeric values, but can also be gibberish such as "4--.4e..e44.."

@modolief Год назад

Wait ... what just happened at the end??

@MasayaShida Год назад

Please make one about handling currency inputs!

@KevinPowell Год назад

Not sure I could do that one in a short 😅

@MasayaShida Год назад

@@KevinPowell ahh you're right. Pls consider as a full video idea!

@aminebouobida877 Год назад

Nice shorts, i really hate the default "select-option" style, please can you show me how to make it better

5 месяцев назад

note: do not forget to validate that also on backend

@memesworld8870 Год назад

Whats the difference between beforeinput and keypress/keydown/keyup? I never got the actual difference between these!!

@KevinPowell Год назад

It's for inputs... After the user has pressed something to add to the input, but before that input is added to the actual element, so it's perfect for this type of use case, where you need to modify what they're trying to put in by limiting the acceptable characters.

@blazeStudioBHP 11 месяцев назад

I was just thinking for a solution for this 😮and the video popped up... literally our minds are being hacked guys!!!!

@CC-1. Год назад

Js isn't complex for that just read input use delay loops 1 mili for and case statement for each else = "" simple

@m4rt_ 10 месяцев назад

also you need input validation on the server side.

@trplnr 5 месяцев назад

dont forget that people that have knowledge could just, **inspect element**, validate with js on client, an validate again on back end :)

@beelzebabe009 5 месяцев назад

w code

@blackpurple9163 Год назад

How can I style those arrows instead of removing them? I think you did it before using appearance-none but is there any other way?

@KevinPowell Год назад

It's different on Safari/Chrome and FF, and you won't get a lot of consistency. Safari/Chome give you a lot more control, but it's webkit controls, so they're non-standard.

@blackpurple9163 Год назад

@@KevinPowell then how can I make custom increment-decrement button? I'm using react so it's not that difficult with react but if there's a simpler CSS way to do it, then I'll look into it, I only want to learn to do something about it, also the type=number doesn't prevent other characters' inputs as you just pointed out, then why does it even exist now, either fix it or remove it, is it that difficult to remove/deprecate it?

@ClickbaiterZ Год назад

@@blackpurple9163 rather than designing that, how about you make a new button beside the input field? Then design it accordingly, just add behavior for it to increment/decrement. That way it will be consistent in all browsers rather than using webkit.

@blackpurple9163 Год назад

@@ClickbaiterZ yes I'm doing exactly that right now, and I love how easy it is in react, but I'm only asking around just in case there's some new improvements made about it in recent years

@ochaun Год назад

Just use a whole bunch of JavaScript. If you hide the scroll arrows it doesn't make them go away. Sometimes scrolling on the mouse wheel forces and increment or decrement

@victorgarcia3526 7 месяцев назад

And how does it affect to usability of disabled people?

@adityakhaprelap 8 месяцев назад

They could just add another attribute to hide the arrows, but nooooooo, they like to see us suffer

@IlPandax Год назад

You could use Inputmask to accept only numbers cross browser.

@petraveryanov2572 6 месяцев назад

You can enter 'e' in number input in any browser (For scientific notation). Guess everyone who ever faced number input should have known it.

@sunofabeach9424 6 месяцев назад

don't you have like patterns for text windows?.. I saw this thing even in a Lua UI library...

@user-fguhiasvhjvbajkfjkbnas Год назад

I'm a Japanes. I translated it, so the English may be wrong. I have specified this on my computer and it doesn't go away.

@TechMagic204 6 месяцев назад

"some CSS you probably hate" 😂😂

@JointDoktor Год назад

And what about floating point numbers? 🤔

@Alacrity69 5 месяцев назад

Who else thought of fireship when hearing the voice?

@bestapps4709 Год назад

Tic Tac Toe Decrepit made in web designer

@Siphonife 5 месяцев назад

This, This is why I can't find any enjoyment in that dev space.

@wasimpatel2618 9 месяцев назад

Just tell me the theme and font you are using

@user-cx9zl4me9e 6 месяцев назад

inputMode not working on my react

@matrixersp Год назад

Now I'm more confused

@temp50 4 месяца назад

It is actually very easy:

@oneke4498 Год назад

YOUR ARE GOD!!!

@jfftck Год назад

I love that Apple once again has to have a special way of doing things, they couldn’t just use the number pad without an extra property. All the Apple only standards are just a continuation of how all computers used to be with each creating their own system and requiring developers to conform to each “standard.” This is why Safari is the new IE.