Number-only inputs aren't so straight-forward
Вставка
- Опубліковано 23 вер 2024
- Code: codepen.io/kev...
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowel...
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowel...
👕 Buy a shirt: teespring.com/...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstu...
---
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 UA-cam channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Code: codepen.io/kevinpowell/pen/dyjwWEY
why not github
Ty
does the trick.
Which is more suitable to accessibility though?
You can try to put input type=“tel”
Double it and pass it to the next back-end developer
Hey Backend Dev? Can I get an Angel Shot
Double it and pass it to the sys admin
@@kristian9268 sure
@@kristian9268 who
Would you rather have a gay son or a thot daughter?
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. 😅
omg. so thats why my number field was bugged. sooo annoying
Oh nice to know, but that's also why we should have validation on input so it can't go higher than a max
I gotta test this with some code I whipped up in Python... If it treats e like a number symbol
@@MaximNightFury Back in August'21 I wrote a note to my coworkers about this issue.
My suggested solution looked like that ...
Oh hell nah that Sounds horrible 😂😂
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.
That is such a creative way to think about it. Making a difference between a number and a sequence of single numbers.
@@poseidonsmafia1160 there is a word for a single number - digit!
@@capsey_ at the top of my tongue xD thank you!
So it's an array of numbers?
@@snailedlt array of digits (because one number can consist of many digits and even symbols), or more accurately, sequence of digits
Waiting for an npm package with 7 dependencies and 4 files to fix numeric inputs
Would
You’re more than welcome to spin something up from scratch but who has time for that?
In Chrome, also accepts the scientific notation, e.g. `1e7` … technically correct, but yet another reason to stay away from it.
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)
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"
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!
Web development is a nightmare
What is not?
Sounds like skill issue
Web development is fun
No it is not. You just gotta study and practice a lot for mastery
@@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
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 :)
Remember to allow minus and dot if you need it in the number
[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
A short with a CodePen. Insanity. THANKS!
Read UK gov web design specifications. Very good specification
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
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).
100%! This is just for a better UI, nothing here about validation 🙂
@@KevinPowell "Front-end is a warzone! A good looking one, though ... but trust no-one, especially not your users" 😆
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?
@@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.
@@Linuxdirk If validation isn’t part of the back-end, and it isn’t part of the front-end, then where is it?
Your content is so helpful Kev, keep going & thank you
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.
It also adds a wonky scroll handler. Good tip
Omg Kevin I love you! Literally been thinking about this problem for the past week
I always want to save these videos, but realize if I did I would probably save every single Kevin Powell video I came across.
You know you are a life saver for lot of devs 😂
Since I know your channel I feel more motivated to learn CSS. You help me alot. Thank you and have a nice day.
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
Thank you for all your tips videos
I always just use type=tel. Shows number keyboard only without the up/down arrows.
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?
@@seanthesheep doesn’t autocomplete”off” takes care of that?
@@sexntuna mobile keyboards might still suggest phone numbers in a non-intrusive chip
@@sexntunaautocomplete="off" is ignored by some browsers.
Do you not care about accessibility?
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
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...
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.
Yes, did something like this few years ago and Safari was a pain.
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.
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.."
I didn't know about 'pattern' and have been using regex.
I love ur style for css creation, and love to follow your thoughts. Great thanks. - GMB Uneke Martin S.
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
.. just as much JavaScript Validation in any case and most importantly perhaps (if theres a backend; perhaps nodejs though), server-side cleaning too (which I normally I min my frameworks automate to be one and the same before a SQLite meshes it into a ball of cymatics iced water storage for my reflective light driven quantum computers etc) 🤓
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).
You can replace value in place to take only number ... and replace text with empty string .
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.
How has this not been abstracted
I actually needed this
Excellent tip. Thanks
decades of web-development, new browsers.. and here we are - discussing how to make a simple numeric input
This is pretty useful! Thanks!
You probably need to put this into stack overflow.
I learned all this in hard way few days ago 🥴
Thanks!
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
I think I'll go with the Css method
Things get out of control really quickly😂
Thanks 🙏 learnt something new.
Bro.
Videos like yours, Will be unnecesary, due yo ChatGPT.
Thank God by your gift to humanity, ChatGPT.
note: do not forget to validate that also on backend
thank you so much
You can enter 'e' in number input in any browser (For scientific notation). Guess everyone who ever faced number input should have known it.
super useful thanks
Please make one about handling currency inputs!
Not sure I could do that one in a short 😅
@@KevinPowell ahh you're right. Pls consider as a full video idea!
dont forget that people that have knowledge could just, **inspect element**, validate with js on client, an validate again on back end :)
how about automatically populating the input from the received sms like an OTP?
My mind is litterly blown
Don't rely on browsers' compatibility, html5, or whatever. Treat it as if there is no browser. The back-end should double check everything.
It is actually very easy:
also you need input validation on the server side.
thanks
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
YEAH!!!!!!!
You could use Inputmask to accept only numbers cross browser.
How does this affect the experience in terms of accessibility?
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
I reject every property when they don't work, in my head pattern doesn't work.
Funny, I just did this the other day. 👍
nice work so Interesting
understatement 😅
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.
Great man
What about use regular expression to validate the input value? I think it's more easy 🤔
How about to use min/max value?
Nice shorts, i really hate the default "select-option" style, please can you show me how to make it better
Thx!
Simply used input[type=tel]
Js isn't complex for that just read input use delay loops 1 mili for and case statement for each else = "" simple
And how does it affect to usability of disabled people?
I think there is a type="numeric"
inputMode not working on my react
The js is not efficient, I am using it in single line,
returning the vale only number in ASCII range.
don't you have like patterns for text windows?.. I saw this thing even in a Lua UI library...
As I am setting up an auto calculated rate form, I ended up setting the final "else" statement with a formatted Intl.NumberFormat of "style: currency, currency: USD" for $0.00 for that error handling for accidental typing of [A-Za-z].
I am offering a dedicated delivery service, and needed to have it calculate at different rates between mileage ranges. And it works. :D 06-12-23 0037 PT
Who else thought of fireship when hearing the voice?
Try to input floating numbers and everything goes to hell because decimals with comma aren't working at default
I was just thinking for a solution for this 😮and the video popped up... literally our minds are being hacked guys!!!!
you also have input="tel" to have number only
amazing!!
These aren't normal numbers, these are *numeric* numbers.
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.
yup such a hassle
Type="tel" allows numeric input and shows numeric keypad on mobile.
You are welcome
How did you know that I.... love CSS!?
I hate it when i only have numeric Keyboard in phon,cause i cant Copy Paste anymore
And what about floating point numbers? 🤔
They could just add another attribute to hide the arrows, but nooooooo, they like to see us suffer
Whats the difference between beforeinput and keypress/keydown/keyup? I never got the actual difference between these!!
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.