[HN Gopher] The number input is the worst input
       ___________________________________________________________________
        
       The number input is the worst input
        
       Author : HieronymusBosch
       Score  : 200 points
       Date   : 2022-09-15 14:31 UTC (8 hours ago)
        
 (HTM) web link (stackoverflow.blog)
 (TXT) w3m dump (stackoverflow.blog)
        
       | ajhurliman wrote:
       | The stepper buttons on the number input are infuriating. They're
       | far too small for anyone to click on, nobody uses them, and they
       | look bad.
       | 
       | Invariably, a designer/PM/someone will come back and say "Is
       | there any way we can get rid of those stepper buttons on the
       | right?" and then it gets changed to a text input with JS
       | validation.
        
         | akira2501 wrote:
         | Yes.. but it is connected to Up and Down arrow. When you're
         | trying to build a fast keyboardable UI, I've found it a
         | convenient enough mechanism.
         | 
         | Also.. to this authors point, wouldn't you just use the
         | 'validationMessage' if you're trying to extract the cause of
         | the error from the field. I have yet to find myself in a
         | position where I need the invalid value anyways.
        
         | Macha wrote:
         | As are the associated change on scrolling behaviour. I keep
         | finding myself adjusting number inputs when trying to scroll
         | the page they're on.
        
       | padseeker wrote:
       | FYI - I wrote the article, happy to answer any questions
        
         | pxeger1 wrote:
         | Is this an advert for Keenforms?
        
         | xg15 wrote:
         | Thanks for the write-up. I'd be interested to know what the
         | actual reasoning in the complaints were though that Keenforms
         | does not use number inputs. Was it just standards pedantry or
         | were there some actual usability issues that were caused by
         | that descision?
         | 
         | You mentioned inputmode="numeric" a few times as a possible
         | solution. Does Keenforms make use of that?
        
         | withinboredom wrote:
         | I think you've missed a few things.
         | 
         | - not everywhere uses a decimal, some uses the comma and a
         | decimal for thousands. Using a number input, these things are
         | handled for you.
         | 
         | - this seems highly specific for a SPA and not server-side
         | 
         | - "e" is a valid part of a number, I don't understand why you
         | have issues with it.
        
           | onion2k wrote:
           | _- this seems highly specific for a SPA and not server-side_
           | 
           | How would you expect users to enter numbers on the server?
        
             | withinboredom wrote:
             | form method = 'POST' and a submit button. Usually.
        
               | anamexis wrote:
               | so... with a number input?
        
               | icedchai wrote:
               | A text input, with form validation / processing done
               | server side, like we've been doing since the 90's.
        
               | anamexis wrote:
               | We've been doing simple JS-based number inputs since the
               | 90s!
        
               | cyral wrote:
               | A SPA is calling a backend as well... and the backend
               | (SPA or not) still needs to handle the number locale
               | (comma versus decimals), unexpected 'e', etc. Not sure
               | what about this is a JS problem.
        
               | withinboredom wrote:
               | FWIW, I've never seen an 'e' from a number input on the
               | PHP side, probably because it is parsed correctly. I've
               | also never seen it from '.valueAsNumber' on the js side
               | either, except rendering big/small numbers but the
               | internal representation was still correct. Using
               | IntlFormat solved that problem IIRC. If you are passing
               | it around as a string, then I imagine it's a bigger
               | problem.
        
           | padseeker wrote:
           | Just read the article. A big part of the article that I can
           | summarize is I don't set the requirements, someone else does.
           | Every project is different. You might be fine with just
           | integers. However I've been tasked with much more complicated
           | requests.
           | 
           | There may be exceptions but I guarantee you in most cases the
           | product manager doesn't want the letter e.
           | 
           | My app was built with Rails, and if you enter the value
           | "3.9e3" which represents the number 3900, Ruby will simply
           | use the number 3 and toss the rest of the value away. Do you
           | really want to add special functionality on the back end to
           | covert that value into the actual value? I surely would not.
           | 
           | Also plenty of people use javascript without it being a
           | Single Page Application. Keenforms is not a SPA, we use React
           | for certain pages, but I wanted to keep server side
           | rendering. Using Javascript is not exclusive to SPAs.
        
             | withinboredom wrote:
             | (int) '3.9e3' gets parsed correctly in php, perhaps use a
             | language built for the web and not a general purpose
             | language, or a framework that knows how to parse
             | exponential notation? It sounds like Rails doesn't
             | understand how software works.
             | 
             | I've also been messing with forms for twenty-something
             | years, and I've never run into these sorts of problems but
             | I understand the problems you are facing, especially after
             | googling these problems and their solution in regards to
             | Rails. I've heard it's a productive language, but when you
             | have to solve such simple problems, maybe not?
             | 
             | Sorry, I don't mean to bash on your chosen language which
             | is probably how this is coming across. I'm genuinely
             | intrigued by these stack overflow answers.
        
               | test098 wrote:
               | "Completely change you application stack and learn a new
               | language so you can parse 3.9e3" is not really an option
               | for most people.
        
             | avalys wrote:
             | 3.9e3 is equivalent to 3900 in the same way that 3,900 is
             | equivalent to 3900.
             | 
             | So, Ruby's number parsing is garbage I guess. Hopefully it
             | at least does this properly for floats?
        
               | Flimm wrote:
               | Some countries use a comma as the decimal point. So it's
               | not obvious to everyone that 3,900 == 3900
        
               | padseeker wrote:
               | With ROR it might be transformed via the params parser.
               | If you enter the code below in plain old Ruby
               | environment, like irl or the console, it will properly
               | parse it;
               | 
               | "3.9e3".to_f => 3900.0
               | 
               | Something happens when submitting web based params. I'd
               | be curious to see what other back end languages and
               | frameworks do.
        
               | radiospiel wrote:
               | This is what happens:
               | 
               | "3.9e3".to_i => 3
               | 
               | and
               | 
               | Integer("3.9e3")
               | 
               | raises "invalid value for Integer()". Really, nothing to
               | see here. Ruby just doesn't treat "3.9e3" as a valid
               | string for an integer (which arguably is correct IMHO)
        
           | jerf wrote:
           | '"e" is a valid part of a number, I don't understand why you
           | have issues with it.'
           | 
           | That's a very programmer-centric take. A very, _very_
           | programmer-centric take. The use of  "e" for exponent in
           | scientific notation is a very computer-oriented take on the
           | problem. Such other places as you may have seen it used are
           | leaks from the computer representation. Nobody else sees
           | numbers that way; scientific notation is generally written as
           | 3.278*1036 (only with better superscripts), which is how it
           | is taught in schools for the most part. There are many
           | contexts where I would say it is _not_ a valid part of a
           | number, because I don 't expect my users to know scientific
           | notation, let alone an idiosyncratic rendering of it used
           | only for historical reasons in certain niches of the
           | programming world.
        
             | withinboredom wrote:
             | I have used a calculator before, and I would expect most
             | users to have used one before too.
        
               | outworlder wrote:
               | > I have used a calculator before, and I would expect
               | most users to have used one before too.
               | 
               | A _scientific_ calculator? Because many cheap calculators
               | will just overflow and not use the scientific notation.
               | 
               | You severely overestimate the... amount of data people
               | retain from school (to put it in nice terms).
        
               | arjvik wrote:
               | Even within the privileged US, you can't expect people to
               | remember obscurities of calculator notation.
        
               | withinboredom wrote:
               | I'd hope so, it's basically taught in the 2nd grade
               | (group 4 here), along with how to read and write and it
               | seems people still remember that ok. Google is also
               | immensely helpful if people forget how to read numbers.
               | /s
               | 
               | I guess the point is, you can parse it and output it in
               | whatever format is appropriate, regardless of how it is
               | stored.
        
               | outworlder wrote:
               | States are also taught in schools and yet many people
               | think New Mexico is outside the US.
               | 
               | If you are creating software for engineers, that's a fair
               | assumption to make (that will understand what an exponent
               | is). The public at large? Absolutely not.
        
               | kevin_thibedeau wrote:
               | That is a convention only commonplace on graphical
               | calculators and modern scientifics with formatted infix
               | entry. A traditional scientific just shows an exponent in
               | a reserved display location.
               | 
               | A large segment of older adults have never used them.
        
               | [deleted]
        
               | withinboredom wrote:
               | I've been seeing it since I was a child on everything
               | from cheap little eight digit calculators to expensive
               | calculators with rolls of paper to graphing calculators.
        
             | ImprobableTruth wrote:
             | I'm pretty sure it's just 'calculator notation' and not a
             | leak from the computer representation, but rather done
             | because of the limited space available (at least on older
             | calculators).
        
               | mturmon wrote:
               | I'm doubtful of this claim. My guess is that the 1.234E-8
               | type notation originates in floating-point input and
               | output on computers.
               | 
               | My (c) 1977 version of K&R C explains printf() around
               | page 145, and it supports the %f notation for output of
               | float's as 1.234e-8, etc.
               | 
               | This Fortran IV manual (early-mid 1960s,
               | https://www.math-
               | cs.gordon.edu/courses/cs323/FORTRAN/fortran...) lists the
               | same exponential notation, but with capital E for REAL's
               | and capital D for double's.
               | 
               | This pre-dates the first hand calculator I know of, the
               | early HP's from 1968. These machines used the same
               | notation as the HP-35 pictured below
               | (https://www.hpmuseum.org/rpnvers.htm#num).
               | 
               | The HP-35 calculator came out in 1972. According to the
               | page below, the scientific notation used is of the form
               | 
               | 1.234-8
               | 
               | i.e., without the E (see the second row of the gallery).
               | 
               | https://vintagecalc.com/hp-35-red-dot/
               | 
               | Just a couple of data points.
        
             | kergonath wrote:
             | > The use of "e" for exponent in scientific notation is a
             | very computer-oriented take on the problem. Such other
             | places as you may have seen it used are leaks from the
             | computer representation. Nobody else sees numbers that way;
             | 
             | It's a pain in the arse to write, though, which is why
             | quite a lot of scientists and engineers use e even though
             | they don't know anything about programming and are very,
             | very far from being CS people.
             | 
             | I don't know anyone who would enter 3 _10^8 naturally in an
             | input field (besides, using_ for multiplication itself
             | comes from ancient technological limits, but nobody uses
             | the proper multiplication sign either).
             | 
             | So yes, you need to support e for scientific notations in
             | any input field that can be used for large or small
             | numbers.
             | 
             | > scientific notation is generally written as 3.278*1036
             | (only with better superscripts), which is how it is taught
             | in schools for the most part.
             | 
             | That's how we write it in LaTeX and our reports, articles,
             | and such. And presentations if you're lucky. But again,
             | nobody writes that if presentation does not matter enough
             | to go through the hassle. Certainly not in plain text where
             | you'd have to use Unicode characters, at which Windows is
             | completely incompetent.
        
               | madcaptenor wrote:
               | your use of asterisk for multiplication has screwed up
               | the formatting because two asterisks get interpreted as
               | indicating italics
        
               | kergonath wrote:
               | Oops, sorry
        
               | not2b wrote:
               | Perhaps, but the notation didn't exist before it was
               | invented as part of the Fortran language.
        
             | ectopod wrote:
             | > 3.278*1036
             | 
             | As a Brit that looks really weird. I'd expect 3*278x1036.
        
               | julianlam wrote:
               | Brits use middots as decimals?
        
               | ectopod wrote:
               | We call them decimal points. Most software uses full
               | stops (aka periods, because that's what's on the
               | keyboard), but decimal points are normal in typeset and
               | handwritten maths.
        
               | bandie91 wrote:
               | yea and more! they use low-dot (period) when multiplying
               | variables, and Roman digit for 1, and does not use the
               | "-rd" ending names for the power of 1000: milliard,
               | billiard...
        
           | mmis1000 wrote:
           | If I understand correctly. JavaScript itself didn't even
           | think '111,2' is a proper float number. Only decimal point is
           | allowed. So by using it, your input already bugged out. The
           | number input is just wild and it did not support transform
           | the input to a proper number for you.
        
             | jeroenhd wrote:
             | > to a proper number
             | 
             | A proper number is 123.456,78 in large parts of Europe. If
             | I can't put that into your number control when my browser
             | locale is set to Dutch, your custom number input has failed
             | as much at the broken input we're talking about.
             | 
             | It's not just the specific separators, of course; in India
             | such a number is often written like 1,23,456.78 for
             | example, grouping numbers entirely different. Don't assume
             | everyone is American.
        
             | rimunroe wrote:
             | > JavaScript itself didn't even think '111,2' is a proper
             | float number. Only decimal point is allowed. So by using
             | it, your input already bugged out.
             | 
             | I may be misunderstanding the gist of your comment, but
             | surely the only "bugged out" behavior would be to try and
             | call parseFloat on the value of the input directly without
             | accounting for localization. Why should JavaScript's number
             | representation affect whether or not I can enter numbers in
             | the way I do everywhere else? The browser offers an API[1]
             | for displaying numbers in a specific locale after all,
             | though it's annoying that you either have to hack something
             | together using Intl.DateTimeFormat.prototype.formatToParts
             | or use a third party library in order to parse them.
             | 
             | [1] https://developer.mozilla.org/en-
             | US/docs/Web/JavaScript/Refe...
        
             | withinboredom wrote:
             | If you use a locale where commas are decimals and use
             | number input, it is a decimal in the code. I have my
             | computer and phone set to en-NL, which has that style of
             | numbers.
        
           | Svip wrote:
           | > Using a number input, these things are handled for you.
           | 
           | That's not my experience. I used a number input field for
           | actual numbers (i.e. amounts of currency), but on some phones
           | (specifically Samsung phones), it would show up with a full
           | stop for decimal points (even though the locale was
           | explicitly set to one with commas for decimal points), and
           | users were unable to enter decimal numbers on Samsung phones.
           | 
           | Unfortunately, the handling of the number input field is
           | extremely browser/OS dependent.
           | 
           | Eventually, I decided to go for text input, with numeric for
           | inputmode, and simply interpret both "." and "," as decimal
           | points (not permitting the user to use thousand separators,
           | but few people would do that for input anyway). A bit
           | awkward, but it worked.
           | 
           | Note: Using text and inputmode=numeric did not technically
           | solve the issue of Samsung phones persistently showing the
           | wrong keypad, but the JavaScript interpretation was the real
           | solution to the problem.
        
             | cronix wrote:
             | When you say "on Samsung phones" do you mean the native
             | Samsung web browser, or any browser on a Samsung phone?
             | Like does this happen on Firefox or Chrome on the Samsung
             | phone?
        
               | Svip wrote:
               | I will admit, my testing was limited to the native
               | Samsung web browser and to a capacitor made native app,
               | where the problem occurred. It is very possible that
               | Firefox and Chrome on the phone would behave as expected,
               | but I never tested them, since users were experiencing
               | the problem with the other versions of the app, and I
               | needed to find a solution.
               | 
               | Initially, I thought it was a problem with converting a
               | React app to a native app with capacitor, but I tried the
               | same Android app on a different (non-Samsung) Android
               | phone and it did not have the problem (iOS similarly did
               | not have the problem, both web and native version).
        
           | blowski wrote:
           | Knowledge is knowing "e" is a valid part of a number. Wisdom
           | is knowing your users probably didn't enter their phone
           | number as a power of 10.
        
             | LinAGKar wrote:
             | A phone number isn't a number, it's a string of digits. It
             | should not use a number field.
             | 
             | It's not even just digits, it can also start with +.
        
           | wongarsu wrote:
           | > "e" is a valid part of a number, I don't understand why you
           | have issues with it.
           | 
           | I think people would have fewer issues with it if the browser
           | transparently converted it, either on entry or when calling
           | .value. It's a somewhat obscure case that's easy to get
           | wrong.
           | 
           | For example if I enter 104e4 into a number input with ID
           | test, I get these results in Chrome/Edge:
           | 
           | > $("test").value
           | 
           | '104e4'
           | 
           | > parseInt($("test").value)
           | 
           | 104
           | 
           | > parseFloat($("test").value)
           | 
           | 1040000
           | 
           | > $("test").value - 0
           | 
           | 1040000
           | 
           | Same with decimal points. It's a weird foot-gun because the
           | solution is only half-there.
        
             | padseeker wrote:
             | It depends on what you are using on the back end. So for
             | the record my own app's back end is Ruby on Rails.
             | 
             | If you enter the value "3.9e3" which represents the number
             | 3900, Rails param parser will simply use the number 3 and
             | toss the rest of the value away. Do you really want to add
             | special functionality on the back end to covert that value
             | into the actual value? Most of us would not.
             | 
             | I'd be curious to see how other languages and frameworks
             | handle this issue but the e for many of us is a real
             | problem. Most people aren't even aware of it, and learn the
             | hard way.
        
             | marcosdumay wrote:
             | That's the Javascript's "everything is a single type, but
             | we use types for polymorphism" footgun, and it's a way more
             | general problem than this. Anyway, every JS developer has
             | been harmed by it and knows about it.
        
             | kilian wrote:
             | If you know you're dealing with a number, use
             | `.valueAsNumber` instead of `.value`. Value is a string per
             | the specification, but `.valueAsNumber` does what you
             | expect (for datetime there is also `.valueAsDate`).
        
               | Jasper_ wrote:
               | The form is submitted to the server using `value`, not
               | `valueAsNumber`. Or maybe you'd prefer all forms to be
               | submitted using JavaScript instead of just using <form
               | action>?
        
         | Karellen wrote:
         | Can you give an example of an invalid value in a number input
         | that you can't retrieve, and explain how that's worse than the
         | invalid value in a text field? I'm having trouble figuring out
         | exactly what the problem is there.
         | 
         | As for min/max limits being bypassed and needing to do server-
         | side validation also... well, yes? But, don't you have to do
         | that even if you're using javascript for validation? The user
         | could modify the DOM directly and replace the form control with
         | one of their choosing that doesn't have javascript listeners,
         | or submit a request from the javascript console, or even figure
         | out all the required cookies and everything and submit a
         | request with arbitrary params using `wget`. The server must
         | _always_ validate client input.
        
         | hn92726819 wrote:
         | Doesn't using the gov.uk article work fine for issues 1, 2, and
         | 4?                   <input required type="text"
         | inputmode="numeric" pattern="-?[0-9]+" title="Integers only" />
         | <input required type="text" inputmode="numeric"
         | pattern="-?([0-9]+|[0-9]*\.[0-9]+)?" title="Decimal numbers
         | only" />         <input required type="text"
         | inputmode="numeric" pattern="[0-9]*(\.[0-9]+)?" title="Positive
         | decimal numbers only" />
        
       | aasasd wrote:
       | Off-topic, but why am I confirming my nonchalance about cookies
       | on Stackoverflow/Stackexchange sites like three times every week?
       | 
       | The first bunch of times I could handwave it off as a result of
       | Stackexchange having hundreds upon hundreds of sub-sites, but
       | that doesn't work months into the deal. It's not like I'm on a
       | mission to visit all those sites.
        
         | umvi wrote:
         | Just a guess but they could be invalidating the cookie
         | controlling whether to display the banner server-side due to a
         | bug.
        
       | silvestrov wrote:
       | There should be seperate types:                   <input
       | type=integer>         <input type=float>
       | 
       | We need 2 different input keyboards on mobile: it should not be
       | possible to type a dot if the input must be an integer.
       | 
       | Currently seems to difficult to get a simple integer input:
       | Chrome and Safari does not interpret step=1 as "no decimals".
       | 
       | Also: the up/down buttons should go. That should be an explicit
       | option as they don't make sense in most cases. Might have a
       | type=count for that.
        
         | hebrox wrote:
         | I was just looking into this today. iOS shows a decimal
         | separator (a comma in the Netherlands) with `inputmode=decimal`
         | and none for `inputmode=numeric`. You can try it out here:
         | https://output.jsbin.com/necuzoj
        
         | lazide wrote:
         | Also fixed precision (aka currency) values.
        
           | silvestrov wrote:
           | Might be woth having a                   <input type=currency
           | currency=DKK>
           | 
           | so the keyboard input can clearly show the currency that is
           | entered. This can be very important in multi-currency
           | applications, e.g. travel (both customer and admin).
           | 
           | Currency attribyte is ISO code:
           | https://en.wikipedia.org/wiki/ISO_4217
           | 
           | Also: <input type=count>
           | 
           | which shows up/down arrows, and is a special case of <input
           | type=integer>
        
             | lazide wrote:
             | That actually sounds like an idea whose time has definitely
             | come. Anyone here on the HTML standards body (or works for
             | Google in the requisite part of the Chrome team)?
             | 
             | There are other uses for fixed precision besides currency
             | (co-ordinates, tolerances, etc.), but currency would be
             | used a LOT!
        
         | jaywalk wrote:
         | Very good summary of the issues I've found with it as well.
         | I've had to instruct my developers to never use this input
         | type, and use an Angular directive to limit input values
         | instead.
        
       | calyth2018 wrote:
       | Yeah no. Drives me nuts on the phone when people don't use the
       | numbers field, so the VKB is not in the number pad mode
       | automatically.
       | 
       | A QWERTY vkb in numbers / symbols mode have tiny number keys
       | compared to a number pad.
       | 
       | If browsers validate differently, then fix them.
        
         | 0x457 wrote:
         | Field type and inputmode are different things. You can have
         | text field, but with numeric keyboard.
         | 
         | Which you would know if you read the article.
        
       | swlkr wrote:
       | I just ran into this, I thought it would be nice to use a number
       | input for relatively large numbers in a form, but then a user
       | asked for a thousands separator.
       | 
       | I ditched the number input.
        
         | ramesh31 wrote:
         | The (new-ish) 'Intl.NumberFormat' API solves this issue
         | 
         | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
        
           | crooked-v wrote:
           | No, it doesn't. You can't apply that to a number input.
        
         | sixstringtheory wrote:
         | I would not provide the user the ability to type a separator,
         | but rather keep their number formatted with them in the
         | appropriate places.
        
         | lewisl9029 wrote:
         | Yep, this is known as input masking, and I wish browsers would
         | just natively support this through various input types, because
         | it's been the bane of my existence.
         | 
         | Phone inputs are especially painful to mask since you have to
         | deal with a mind-boggling number of format variations.
        
       | ffhhj wrote:
       | And the search input doesn't allow disabling auto-uppercase.
        
       | aasasd wrote:
       | The worst number input that I've seen is some Windows input, in
       | which the value must always be valid and in the allowed range.
       | So, say, the current value is '300' and you want '100'--but you
       | can't backspace over the '3' and enter '1'. If the value is '350'
       | and you want '100', you can't even select '35' and type '10',
       | because the input will freak out midway and immediately replace
       | the value with the allowed minimum. Moreover, how do you even
       | type the number you want if the input can't be empty? If the
       | minimum is 20, you can't ever type anything from scratch without
       | doing some select-replace gymnastics, because every digit will be
       | immediately replaced with the value 20.
       | 
       | Can't remember which app it was, and if it was a standard input
       | from one of the dozen MS frameworks--but the testers on it
       | must've been mightily incompetent. Imagining for a second that
       | someone worked on that is like catching a glimpse into an abyss
       | of pure stupidity. After this horror I'm quite relaxed about
       | problems with inputs that at least allow me to type the damn
       | number.
        
         | nijave wrote:
         | Reminds me of the inputs that try to be clever with formatting
         | and move the cursor around and insert characters (happens with
         | dates a lot). When you try to backspace, the input cleverly re-
         | inserts the divider and moves you forward again
        
       | AtNightWeCode wrote:
       | Frontend problems really are something else. First, a number may
       | include letters and does not correspond to real numbers. Second,
       | JS thought it was a good idea to not care about the datatypes.
       | Then the worst. The mess created by decimals and commas having
       | different meanings in different langs and cultures. A bug I see a
       | couple of times per year and a freaking terrible one cause users
       | enter decimal numbers that are 100 times smaller or bigger than
       | intended.
        
       | banana_giraffe wrote:
       | The suggestion about using pattern="[0-9]*" will cause problems
       | if your users copy-n-paste (or just type) a number with thousand
       | separators.
       | 
       | People are probably used to providing input in a way to make the
       | stupid computer happy, but that friction need not exist.
        
       | jiveturkey wrote:
       | really nice ad for Keenforms!
        
       | Minor49er wrote:
       | A lot of confusion around this is because there isn't a general
       | understanding around whether <input type="number"> represents a
       | strict numeric value or if just the input interface should be a
       | numpad instead of a full keyboard
        
         | [deleted]
        
       | runarberg wrote:
       | > I won't pretend to be the expert on all things related to forms
       | 
       | Indeed. All of the issues the author is experiencing can be
       | easily fixed with simple and readily documented javascript
       | methods:
       | 
       | > When the number input contains an invalid value and you
       | retrieve the value, you get a blank string
       | 
       | > Valid numbers include more than just digits (i.e,. scientific
       | notation like the letter e).
       | 
       | > Different browsers accept different characters
       | 
       | Use inputElement.valueAsNumber and stop worrying.
       | 
       | If you send the form unaltered (that is, without intercepting the
       | submit event), use a custom validator.
       | 
       | https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputEl...
       | 
       | > Min/max limits can be bypassed
       | 
       | Use frontend validation, e.g. inputElement.validity
       | 
       | https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Cons...
       | 
       | There are plenty of weird form elements out there, but input
       | type=number is actually one of the better one. But the author is
       | definitely very right about one thing:
       | 
       | > _You should only use the number input when dealing with
       | mathematically relevant numeric values_
       | 
       | Mathematically relevant might be to strict. I would say that if
       | ordering the numbers makes sense, then input type=number most
       | likely makes sense as well. If your data is simply represented by
       | a number (e.g. zip codes; 90210 < 98112 is a weird statement)
       | input type=number is the wrong choice.
        
       | partdavid wrote:
       | The article lays out a lot of good points, though I think a lot
       | of them can be summarized more as "here are things you may not
       | have realized about the number input, so use it accordingly"
       | rather than "it's the worst."
       | 
       | > The built-in validation is visually inconsistent to whatever UX
       | when you are building for your app.
       | 
       | To me, this is the kind of thinking that takes Web 2.0-isms too
       | far and makes for actually really shitty UXes. (And yes, of
       | course, I know that the responsibility for these peeves lies with
       | product managers, designers and the like _as well as_
       | developers).
       | 
       | I _do not_ need a picker to pick my state. I know what f---ing
       | state I live in. I do not need to review a list of all states,
       | hoping I 'll know it when I see it. In fact, for a semi-
       | structured and rather complicated piece of data like an address,
       | why force the user to partial-parse it anyway? No, the fact that
       | you can type the first letter does not help. Just let me type the
       | abbreviation. I know what it is! I f-----g live here!
       | 
       | I know how to type a g-----n address, especially my own, and it's
       | likely that, unlike you, I actually know how to do it correctly.
       | You know, where my ward goes? Ward? You didn't think of that? My
       | fractional street number or the fact that I don't have one?
       | 
       | I _do not_ need a calendar widget to pick my birthdate,
       | especially when the calendar invariably starts with _today_ and
       | does not offer a straightforward way to type the date in my local
       | format. I know when I was f---ing born. I do not need to look at
       | a calendar and think  "Hm, I know it was a Wednesday... maybe
       | some time in the '90s? Better click the tiniest f---ing left-
       | guillemet << I've ever seen 360 f---ing times and then maybe one
       | of those months will ring a bell!"
       | 
       | And also, run your braindead validation when I'm well finished
       | entering my information. You do not need to red-highlight the
       | field just because I put the point somewhere else outside of it.
       | You do not need to give me a popup for every number in my phone
       | number until there are ten digits. You do not need to confuse me
       | by sometimes filling in phone number delimiters as I type, and
       | sometimes prohibiting them from appearing at all. I've had two
       | different phone number fields on the same form behave in both of
       | these ways!
       | 
       | Thinking of form-filling-out as a "user experience" or "live
       | interaction" is okay, I guess, but it can't dominate your
       | thinking to the point that you lose why it's a "form" in the
       | first place. There are lots of use cases that really are
       | analogous to filling out a form, I think a lot of web sites could
       | do a better job of keeping the power of that analogy and using
       | dynamics to enhance it.
        
       | [deleted]
        
       | bgro wrote:
       | This sounds like victim blaming devs for correctly calling things
       | numbers, but the expected correct answer is something else. There
       | shouldn't be a guessing game as to what the most correct name is
       | that causes everything else to be wrong.
       | 
       | The true fault here is ambiguous naming conventions that become
       | booby traps.
       | 
       | Should we be blaming people for trying to pull open a door that
       | has a pull handle even though there's technically "push" writing
       | on it? It's just so convenient, as the door maintainer, to have
       | just one type of door, though. Am I so out of touch? No, it's the
       | users who are wrong!
       | 
       | Aside from redesigning a lot of things like this that could've
       | been implemented better, we need to do better to avoid ambiguous
       | naming. We should adopt more verbose naming standards. In this
       | case, we could get rid of literal "number" to replace with
       | "number-incremental," "number-money," "number-scientific" etc.
       | 
       | If people try to use just "number" and see it doesn't work, they
       | should be able to quickly find the correct thing without having
       | to decipher a made up nonsense name like "lambda" or scrolling
       | through an alphabetical list of input types and having to spot
       | every possible number type, read its description, and then
       | compare every result to determine the actual correct one.
       | 
       | Yeah, developers can learn with time and it's good to know all
       | the different options... But why aren't we setting people up for
       | success in the first place?
        
         | r-w wrote:
         | Take it up with the way web standards work.
        
       | tommica wrote:
       | You want a real challenge? Build a number input that handles
       | localizations, some countries use "," to separate decimals, and
       | allow displaying thousand seperator automatically while typing,
       | but read the value as a normal number during submit.
       | 
       | So something like "12.400,56" turns to 12400.56 and vice versa.
       | 
       | Also, is it just me or does this article seem to be a bit of an
       | ad for "keenforms"? Its mentioned multiple times.
        
         | jdthedisciple wrote:
         | Sounds like a problem that should've been solved once and for
         | all already.
         | 
         | To your last point: I think it more or less obviously is an ad
         | for keenforms, yes.
        
       | psadri wrote:
       | HTML inputs have APIs for checking their validation state. The
       | input returning "" in invalid state is easy to test for:
       | 
       | const num = numInput.checkValidity() ? numInput.value : 0; // or
       | some other default
        
       | [deleted]
        
       | bob1029 wrote:
       | If a non-developer calls it a "<something> number" it's
       | definitely a string for me. Even if you need to occasionally
       | perform arithmetic on these "numbers", you could still store them
       | as strings and parse on-demand.
       | 
       | In my experience, performing a culture-specific
       | decimal.TryParse() at form submission time is the most robust way
       | to validate something like a wire transfer amount. You can also
       | do regex replace javascript stuff, but there are always some
       | dragons in that realm (especially as you cross borders). Your
       | backend is almost always going to be a better place to parse and
       | verify user input.
        
       | jen20 wrote:
       | Although I agree with the point made in this case about the
       | number input (provided "inputmode" is set so a mobile device
       | presents the right kind of keyboard), this kind of thinking
       | drives me nuts:
       | 
       | > As a programmer, you might find this acceptable, but there's a
       | good chance your designer and/or product manager will not.
       | 
       | I couldn't care less if a designer is unhappy with the native
       | functionality my browser exposes, it's called a user agent for a
       | reason. They probably aren't happy with my custom style sheet
       | either and this idea that designers' whims can override user
       | preferences needs to stop.
        
         | esrauch wrote:
         | First I think in this case the browsers are all stuck with a
         | bad decision made in a different era because they don't want to
         | break back compat, and there's no user or product owner who
         | thinks this is actually the right behavior. Do you expect every
         | user and every product to be happy with bad behavior for
         | philosophical reasons?
         | 
         | Second a browser is less and less a user agent and more and
         | more just an app runtime. It's only the lingering history that
         | separates browsers from native app runtimes and not any real
         | difference in expected semantics about experience control.
        
           | jen20 wrote:
           | > Do you expect every user and every product to be happy with
           | bad behavior for philosophical reasons?
           | 
           | No but I expect them to realise the boundary of their own
           | control.
           | 
           | > Second a browser is less and less a user agent and more and
           | more just an app runtime. It's only the lingering history
           | that separates browsers from native app runtimes and not any
           | real difference in expected semantics about experience
           | control.
           | 
           | This is only true if we let it be true.
           | 
           | I detest browser applications, which almost never are
           | accessible, never use platform-native UI, do not integrate
           | properly with system services. Except in dire circumstances,
           | I simply refuse to use them.
           | 
           | I am in no way willing to give up my uniform platform to
           | appease someone who things that every UI element should be
           | "branded".
        
         | barneygale wrote:
         | Bizarre, isn't it? The goal seems to be to rely entirely on
         | Javascript and throw away any native OS/browser handling. If
         | your designers/product managers are asking for that it's time
         | to find another job.
        
           | ryandrake wrote:
           | Sometimes when I want to depress myself, I try to imagine the
           | total collective engineering-hours ever wasted re-
           | implementing standard OS or browser controls, just because a
           | designer did not like the aesthetic choices of the OS or
           | browser vendor. When I think back to the least intrinsically
           | rewarding programming tasks I've ever had, they were all
           | along the lines of "XyzOS's combo box drop-down is ugly. Here
           | is a Photoshop of how we think a combo box should look. Go
           | write 10K lines of code to re-implement the functionality we
           | could otherwise get with one line."
        
             | spookie wrote:
             | I totally agree with you. I guess most non-programmers
             | would roll their eyes reading this, but honestly, stop
             | trying to make every single web page a native app
             | replacement. And it's nuts how far we've gone into this.
             | Companies don't want you to run their software natively,
             | which is fair enough. But, somehow _THIS_ is the best
             | anyone comes up with.
             | 
             | It's really, quite a sad state of affairs.
        
       | aarongray wrote:
       | Case in point: https://stackoverflow.com/questions/6178556/phone-
       | numeric-ke...
        
       | brundolf wrote:
       | > The Gov.UK article mentions a possible solution: Using <input
       | type="text" inputmode="numeric" pattern="[0-9]*"> is a nice
       | option for integers, but it won't work for floating point decimal
       | numbers.
       | 
       | Note that there's also an inputmode="decimal" option which does
       | have a decimal-point on Android and iOS
       | 
       | Really the answer is just, "don't use number most of the time,
       | use regular text with the appropriate inputmode". The inputmode
       | abstraction is better than the type abstraction; it lets you
       | specify what you really care about most of the time (mobile
       | keyboards) without a bunch of extra constraints bundled in there
        
         | darepublic wrote:
         | Updating pattern to support float seems viable no?
        
           | pfortuny wrote:
           | Until you come to Spain and write
           | 
           | 8.320.320,23
           | 
           | ...
        
           | brundolf wrote:
           | Yep you can do that alongside this change
        
           | onei wrote:
           | Not being a front-end dev, it does seem trivial, but using
           | [0-9\\.]* means you can have 1.2.3. You can tighten that
           | regex up, but I imagine that either doesn't fly with mobile
           | keyboard hinting or screen readers trying to hint what a
           | correct value is.
        
             | brundolf wrote:
             | This one works: `[0-9]+([\\.][0-9]+)?`
             | 
             | > I imagine that either doesn't fly with mobile keyboard
             | hinting or screen readers trying to hint what a correct
             | value is
             | 
             | The `pattern` attribute isn't used for anything except
             | validation as far as I know; the mobile keyboard at least
             | is entirely driven by `inputmode` and/or `type`
        
               | greiskul wrote:
               | Doesn't work with i18n (some countries use , instead of .
               | as the decimal separator).
        
               | ascar wrote:
               | Actually the majority of the countries use the comma.
               | Though dot wins by population as China and India use it.
               | 
               | https://en.m.wikipedia.org/wiki/Decimal_separator
        
               | darepublic wrote:
               | Fwiw the pattern can be dynamic. But at that point as
               | others have noted might be better to have a dedicated
               | validator
        
               | andylynch wrote:
               | It will work until you have someone from Europe get in
               | touch early in the morning to complain your form doesn't
               | accept decimal commas (although they may well just roll
               | their eyes again and mutter something about how Anglos
               | don't bother supporting their international users
               | properly).
        
               | brundolf wrote:
               | `[0-9]+([\\.,][0-9]+)?` then
               | 
               | Getting into the weeds here though. The
               | advantages/disadvantages of regex-based validation are
               | beside the original point (and anyway I prefer doing
               | validation in JS most of the time, for various reasons,
               | but that's also out of scope)
        
               | klibertp wrote:
               | > I prefer doing validation in JS most of the time
               | 
               | As you should! :) Preferably by using a parser-generator
               | library. Validation is basically just an error mode of
               | parsing, and parsing things with regexes is not only
               | unreadable, but also loses a lot of valuable information
               | about the error.
        
               | quink wrote:
               | Switzerland is in Europe.
               | 
               | With 1'000'000 percent certainty.
        
         | runarberg wrote:
         | > The inputmode abstraction is better than the type abstraction
         | 
         | No. inputmode has no localization, or validation.
         | 
         | If your locale uses period as a decimal mark, but mine uses a
         | comma, you can type "42.5" while I type "42,5" and they are
         | both the same numbers (both evaluate to 42.5). You also get
         | localized front end validation for free if you use type=number,
         | but you'll have to implement it your self with inputmode.
        
       | kilian wrote:
       | My personal pet-peeve is devs using the number input for things
       | that contain digits but aren't "numbers" (credit card numbers,
       | 2fa codes, postal codes etc)[0]. Number input provides a lot of
       | footguns and you're usually better off using something else.
       | 
       | [0] https://kilianvalkhof.com/2022/css-html/are-you-sure-
       | thats-a...
        
         | gherkinnn wrote:
         | My personal pet-peeve is when devs use any sort of numerical
         | type for things that don't require numerical operations.
         | 
         | I will never sum up a list of phone numbers, nor will I ever
         | divide my CC number by two.
         | 
         | They're strings that just happen to be made up of numbers.
        
           | staringback wrote:
           | https://en.wikipedia.org/wiki/Luhn_algorithm
           | 
           | Credit card numbers are used with numerical operations
        
             | MBCook wrote:
             | That's a checksum algorithm. You could easily devise
             | something similar for a word based on the characters in it.
             | That doesn't make it a number.
             | 
             | GP is right. You never do math with two credit card numbers
             | as inputs. You can't negate a credit card number, or find
             | its absolute value, or square, etc.
             | 
             | It's just a _string_ of digits.
        
               | staringback wrote:
               | Did you even read the wikipedia page I linked?
               | If the number already contains the check digit, drop that
               | digit to form the "payload." The check digit is most
               | often the last digit.         With the payload, start
               | from the rightmost digit. Moving left, double the value
               | of every second digit (including the rightmost digit).
               | Sum the digits of the resulting value in each position
               | (using the original value where a digit did not get
               | doubled in the previous step).         The check digit is
               | calculated by 10 - ( s mod [?] 10 ) {\displaystyle
               | 10-(s\operatorname {mod} 10)} {\displaystyle
               | 10-(s\operatorname {mod} 10)}.
        
               | zmgsabst wrote:
               | That excerpt is clearly describing operations on the
               | digits that compose the string and not arithmetic on the
               | CC number as a single integer.
        
               | pphysch wrote:
               | The first line is revealing; "contains" is not an
               | operation usually performed on numbers.
               | 
               | Does the number 21 "contain" the number 2? Not in a
               | meaningful sense.
               | 
               | However, the string "21" definitely contains the
               | substring "2".
        
               | colejohnson66 wrote:
               | I think what GP is saying is: Just because it is a number
               | (that has a checksum built on it being a number), does
               | not mean most programmers should treat it as one; Treat
               | it as an opaque string. If you need to validate it, use a
               | _character by character_ (not digit by digit) Luhn
               | algorithm; Work on ASCII digits, not numbers.
               | 
               | The issue is that many beginner (and some experienced)
               | programmers treat what should be opaque strings as
               | numbers and throw them into a 32/64-bit integer, or
               | worse, a double precision float (in JavaScript). This can
               | result in data corruption if not done carefully. Then,
               | when something comes in to challenge the programmer's
               | expectations, the program breaks. For example, ZIP/postal
               | codes are 5 numeric digits in the US, but in CA, they're
               | of the form "A1A 1A1" (notice the space and letters).
               | JavaScript's `parseInt` will return NaN on a Canadian
               | postal code. Another one is house numbers; They look
               | numeric, but can have letters or even fractions(!) in
               | them.
        
               | thechao wrote:
               | To reiterate your statement: it's a string with
               | constraints on the glyphs!
        
         | xxr wrote:
         | A former employer had a system that consumed phone calls from
         | Twilio. The phonecall table had a touchtoneinput column for the
         | sequence of digits a caller pushed after the call connected
         | (press 1 for English, press 3 to dispute a charge, etc.). We
         | would sporadically get these query errors on inserts--turned
         | out the touchtoneinput column was defined as a bigint, and the
         | rare occasions where a caller pressed the # or * keys were
         | sending input that obviously could not be parsed as an integer.
         | 
         | Good rule of thumb: if a reasonable person calls it a number,
         | but your application is never going to perform arithmetic on
         | it[0], it should probably just be a string.
         | 
         | [0]: Yes, a credit card number can be checksummed, but that's
         | more in the sense of a CC# being a sequence of numbers rather
         | than one int.
        
           | jbverschoor wrote:
           | A string of digits instead of a string of characters to be
           | precise
        
           | staticassertion wrote:
           | First thing I do when I call an automated line is spam #
           | because that seems to escalate to a human 9x/10.
        
             | JadeNB wrote:
             | I've noticed a lot more evil choose-your-own-adventure
             | phone menus these days resort to "Sorry, I couldn't
             | understand" / "Sorry, I still couldn't understand" /
             | "Sorry, your input could not be processed. Goodbye."
        
               | 9dev wrote:
               | Yep, ye tricks of olde like repeatedly saying ,,help" or
               | ,,customer service" don't seem to work on those... i
               | recently dealt with an especially frustrating case when
               | moving and buying a brand-new fiber connection. Turns
               | out, they got the activation date wrong, so I called the
               | support hotline mentioned in the confirmation mail. The
               | menu prompted me for my customer ID - which I didn't yet
               | have - and wouldn't let me through, even after trying all
               | possible options. In the end, I just called the sales
               | hotline and let them handle the transfer...
        
               | [deleted]
        
               | JadeNB wrote:
               | I particularly hate the ones that just hang up if you
               | guess wrong three times.
        
             | kstrauser wrote:
             | I've, um, heard, that more sophisticated phone trees react
             | to profanity by connecting you to a person more quickly,
             | using the logic that you sound pretty upset and need help
             | _now_.
        
               | inopinatus wrote:
               | I ran a network & voice refresh project for a national
               | financial institution a few years ago; during the RFT
               | some vendors pitched a stress analysis element for the
               | contact center & IVR systems. The institution demurred,
               | citing (amongst other concerns) the likelihood of it
               | being gamed.
        
             | idiotsecant wrote:
             | You're usually better off letting the IVR route you to the
             | first dialogue tree option at least before you start
             | spamming, otherwise you get the 'idiots who can't listen to
             | dialogue tree' receptionist who has to transfer you to
             | someone else anyway but might not get you to the right
             | place on the first try.
        
             | kirse wrote:
             | My thumb rule is always dial the number where the company
             | hopes you'll be handing over money, rarely fails to get me
             | faster to a person who can help or transfer. _Schedule
             | appointment_ , _Re-order Supplies_ , and _Billing
             | Questions_ are always much better than the _Cancel service_
             | or _Tech Support_
        
           | themenomen wrote:
           | Mayor issue here seems to be not validating and sanitizing
           | inputs before a DB insert.
        
             | nightpool wrote:
             | Or not even being able to log errors and see what the error
             | message says. You don't need to do ahead-of-time
             | sanitization to realize that "Invalid literal for type
             | 'bigint': "120380123#"" means that you should fix your DB
             | type.
        
           | londons_explore wrote:
           | There are actually 4 more touch tones possible - A, B, C and
           | D.
           | 
           | Sometimes you can get into secret menus if you play the tones
           | for them...
        
             | jbverschoor wrote:
             | How do I enter these from an iphone? Or should I just let
             | my laptop output the dtmf tones?
             | 
             | I'm def. gonna try this out. I usually pres & and # a
             | couple of times, because it often skips the useless menus
             | and takes me to a person
        
               | hnuser123456 wrote:
               | I've found pressing 0 or 1 usually works too
        
               | sshine wrote:
               | > should I just let my laptop output the dtmf tones?
               | 
               | Yes. Depending on your OS, it might even have the sound
               | files:
               | 
               | https://osxdaily.com/2016/03/31/play-dtmf-tones-mac/
        
               | jbverschoor wrote:
               | Cool!, but that doesn't include ABCD.
               | 
               | https://pbxbook.com/other/dtmftone.html does. I'll try a
               | company I know takes at least 40 minutes usually :
               | 
               | Also, something that annoys me about VOIP is that they
               | don't take into account the different tones in different
               | regions. Here in the Netherlands we use 425Hz fo dial
               | tone etc. It always feels very emulated because it's a
               | different tone.
        
         | rwky wrote:
         | Funnily enough I just dealt with this scenario today. I had to
         | fix a database which was storing phone numbers in an int
         | column. The phone numbers start with a 0 so no surprise
         | querying it didn't work! It's now a string.
        
           | lattalayta wrote:
           | I saw the same thing once for United States zip codes. I
           | guess they didn't realize that the east coast has zip codes
           | that start with 0s
        
             | at_a_remove wrote:
             | Then you've got your ZIP+4 format ...
        
           | inopinatus wrote:
           | The tendency of spreadsheets, most notably Excel, to convert
           | phone numbers to integers (or worse, a generic number form
           | that it then saves in floating-point representation) has
           | infuriated everyone that ever exported a telephone field.
           | 
           | Yes, there are ways to trick Excel into interpreting the
           | value as a string. None of them are foolproof.
        
         | padseeker wrote:
         | I actually mentioned that at the bottom of the article on how
         | to handle the issues mentioned. Firmly agreed, using the number
         | input for non mathematical values is a horrible idea.
        
         | cafard wrote:
         | Years ago, a report somebody had built for us blew up on some
         | addresses in the Midwest. A look at the addresses showed values
         | of the form "12345E State Road 5". The control that read the
         | house number interpreted as a number in scientific format, and
         | of course had no provision for a number that large. Dropping a
         | space in before the "E"s allowed the report to run.
         | 
         | This is an odd case, in that the house number is a "number": in
         | the US it generally indicates distance from some fixed line,
         | and the parity can indicate which side of the street it falls
         | on. But then people will write them with As, Bs, Es, etc.
         | attached.
        
           | vsareto wrote:
           | Someone should write a bot to post a reminder to "start with
           | strings unless you're doing math" to reddit/twitter/youtube
           | every week and the world would probably be way better for it.
           | We could even have compiler warnings for type-safe languages
           | when someone declares an int with a name containing
           | 'address/zip/postal/credit/card'
        
             | fsckboy wrote:
             | "start with strings unless you're doing math"
             | 
             | lambda calculus tells us, stick with strings even when
             | you're doing math
        
             | r-w wrote:
             | > We could even have compiler warnings for type-safe
             | languages when someone declares an int with a name
             | containing 'address/zip/postal/credit/card'
             | 
             | That sounds like it would be a better job for a linter than
             | for a compiler.
        
               | gibolt wrote:
               | Why not both! Not everyone uses a linter (unfortunately).
               | Compiler would be a nice second catch (for any tooling
               | that has a compiler)
        
           | nijave wrote:
           | In the U.S. it's possible "12345E State Road 5" and "12345 E
           | State Road 5" are different addresses depending on if the
           | streets have directional suffixes and how they're interpreted
           | (east and west)
           | 
           | I'm not sure how mail carrier software works, but in general
           | there's a lot of variations of the same address that still
           | lead to mail getting delivered correctly (and some addresses
           | where the mail can't be delivered at all)
           | 
           | For U.S. apartments, usually any of these work "123A Some St"
           | "123 Some St #A" "123 Some St Apt A" "123 Some St Unit A"
        
             | Aloha wrote:
             | Also - 12345 State Road 5 E and 12345 E State Road 5 E, and
             | 12345E State Road 5 E
        
           | gregmac wrote:
           | > But then people will write them with As, Bs, Es, etc.
           | attached.
           | 
           | This is fairly commonly used for multi-unit dwellings,
           | especially when someone turns a "normal" house (with a purely
           | numeric street address) into multiple units, including
           | renting out their basement.
           | 
           | In subdivisions the houses are often consecutive numbers
           | (with odd/even numbers on opposite sides of the road), and
           | it's not like the city is going to re-number every other
           | house on the street.
        
             | sophacles wrote:
             | This is also often how you end up with 1/2 addresses - a
             | lot is split and rather than renumber the block, they have
             | one of the lots keep the original and the gets (e.g.) 408
             | 1/2.
             | 
             | And that's why I have a home address that doubles as an
             | input fuzzer.
        
           | kube-system wrote:
           | If something is sometimes a number, then it's not a number.
           | Address numbers in the US are just identifiers that use
           | digits, and sometimes they are derived from some other factor
           | that is a (or multiple!) number.
        
         | madeofpalk wrote:
         | The most infuriating part about number input, is when you set
         | min=0, you can't backspace in the field to enter a different
         | number.
        
         | superjan wrote:
         | An easy question to ask: "would it be fine to add or remove an
         | arbitrary number of leading zeroes?" If no, don't put it in a
         | number field.
        
           | [deleted]
        
         | triceratops wrote:
         | Stupid question. If you don't use input[number] on such fields,
         | how do you get a number keypad input on mobile keyboards for
         | them? It's annoying, as a user, to switch to numbers and use
         | the tiny row of numbers to enter credit card info.
        
           | neon_electro wrote:
           | Not a stupid question! I believe CSS Tricks has your back.
           | 
           | https://css-tricks.com/finger-friendly-numerical-inputs-
           | with...
        
           | xboxnolifes wrote:
           | type=text
           | 
           | inputmode=numeric
        
             | triceratops wrote:
             | Thank you!
        
             | dhritzkiv wrote:
             | This.
             | 
             | Further, for credit cards, you can add `autocomplete="cc-
             | number"` to the input and it will provide platform-specific
             | UI for pre-filling the credit card number.
        
           | [deleted]
        
         | hbn wrote:
         | My credit card number is three quadrillion, five hundred and
         | twenty-eight trillion, nine hundred and seventeen billion...
        
           | fsckboy wrote:
           | just as a bit of trivia, not sure where this even comes from,
           | Dickensian counting houses? but you're not supposed to put
           | the word "and" in there, just strip it out; say "and" when
           | you get to the decimal point
        
             | airstrike wrote:
             | the "and" is there in other languages so maybe it's just a
             | translation oversight ;-)
        
             | kccqzy wrote:
             | The "and" after "hundred" is just standard British English.
             | American English omits that "and" though.
        
               | fsckboy wrote:
               | but it makes an actual difference in unambiguous
               | comprehension, like the Oxford comma.
               | 
               | "one hundred seventeen" vs "one hundred and seventeen"
               | are different, 117 vs 100.17
               | 
               | "twenty three eights" vs "twenty and three eighths" are
               | 23/8 vs 20 3/8.
               | 
               | I don't know why this idea is upsetting to people.
               | 
               | https://www.grammar-
               | monster.com/lessons/numbers_how_to_write...
        
               | jimjimjim wrote:
               | most english speaking countries apart from the us (and
               | canada?) say and. Are you saying they are wrong and you
               | are right?
        
               | fsckboy wrote:
               | I'm not saying "I'm right", I'm saying "this is a system
               | I was taught, the system pre-existed me, and I thought an
               | intellectual website that obsesses over the history of
               | small details and unambiguous communication protocols
               | would appreciate my contributing it."
               | 
               | back when we wrote checks, you didn't write the word
               | "and" till you got to the cents (US) on a line that was
               | preprinted "dollars": one hundred fifty three cents
               | dollars" vs "one hundred fifty and three cents dollars".
               | 
               | It's history, it's interesting, it's not meant to throw
               | you into a panic or fits of anger. And I very much doubt
               | that you speak for all of English speaking countries, and
               | through history as well, but must admit you might and I'm
               | lucky to encounter an historian of numerical orthography.
        
               | macintux wrote:
               | I can't speak for everyone, but I've never in my
               | 50+-year-life had someone express in American English
               | "and" while referring to a decimal point.
               | 
               | (Update: unless the units were expressed after the
               | following number, like 5 dollars and 13 cents, which
               | still wouldn't express a decimal point.)
        
               | jimjimjim wrote:
               | my tone was probably a bit blunt. It seems to be a
               | stimulus-response in me when regional differences in
               | language, date formats or units of measure are presented
               | as being wrong rather than just different.
        
               | dwringer wrote:
               | I'm not sure where "one hundred and seventeen" would mean
               | 100.17. To me, as someone from the US, it unambiguously
               | means 117. I probably wouldn't use the "and" myself, but
               | it makes no difference in interpreting the numbers. To
               | say 100.17, I would say "and 17 hundredths", not just
               | "and 17" (17 what?).
        
               | kaashif wrote:
               | This is surprising to me because as a British person
               | living in the US, who is familiar with British and
               | American English, I've never once heard anyone use "and"
               | to mean a decimal point. Literally never. The first time
               | I'm hearing about it is from your comment.
               | 
               | I even found this article about how "and" doesn't
               | actually mean decimal point:
               | https://www.grammarphobia.com/blog/2012/02/decimal-
               | point.htm...
        
               | fsckboy wrote:
               | just because you haven't heard of something doesn't mean
               | it doesn't exist.
               | 
               | I think it dates from the time when the only decimals the
               | average person would use were in currency.
        
         | chrsig wrote:
         | i have an insurer who uses social security numbers as account
         | numbers...and stores them as integers.
         | 
         | the developers obviously did not realize that social security
         | numbers may start with a leading zero. (so can postal codes!)
        
           | px1999 wrote:
           | A bit of a side point but I'm a little amazed that using ssns
           | as account ids is legal.
           | 
           | The approach just seems to be asking for identity
           | theft/fraud...
        
             | somat wrote:
             | Personally I am conflicted on this one.
             | 
             | On the one hand a ssn number(or any identifying number)
             | should not need to be any more secret than the name it is
             | replacing, your ssn should be able to be publicly
             | available.
             | 
             | However, this is the real world and many people and
             | institutions use the ssn as the sole source of identity,
             | which means it needs to be kept secret.
        
           | fwip wrote:
           | This can clearly cause output formatting issues, but it
           | doesn't seem to introduce any ambiguity as they're all 9
           | digits.
        
             | [deleted]
        
       | tuckerpo wrote:
       | > Imagine a software tester finds this issue and logs a bug.
       | Imagine the product manager hears about the bug. Imagine
       | discussing this bug during sprint planning, but then pleading
       | your case to that same product manager: "This is an edge case and
       | the number will still be validated on the back end." And besides,
       | you said this was MVP and this "bug" is actually standard
       | behavior of the number input. Imagine losing that battle and
       | having to fix it anyway.
       | 
       | I felt sick reading that. We've all been there.
        
       | 6510 wrote:
       | It was a nice idea initially but implementation was rather
       | dramatically more complicated than one would think (or at least
       | than I thought it would be) The article mentions some issues but
       | the most horrific one is missing:
       | 
       | If you focus the input field, hold the pointer over it and move
       | the scroll wheel the value is rounded off, increased or
       | decreased. There are 2 gotchas here.
       | 
       | Thus I found myself filling out a form that has to be filled out
       | with the utmost accuracy. I look over the values again and again
       | until the paranoia of potential financial disaster is
       | sufficiently comforted. My eyes circle from field to field 6-10
       | times. (I'm never again going to make a mistake with this form
       | ever again, enough is enough)
       | 
       | I then scroll to the submit button.
       | 
       | You can imagine what happens next, it involved a lot of
       | adrenaline. One of the fields had changed, it was lower than
       | before and everything behind the decimal point was unchanged. To
       | make matters worse, I had no idea how this happened.
       | 
       | Next time I check all the values 20 times, scroll to the submit
       | button and check the visible values again. So far so good?
       | 
       | I keep doing this and eventually it happens again!
       | 
       | It wasn't until the 5th time I finally deciphered what was going
       | on.
       | 
       | https://jsfiddle.net/d63gv41k/
        
       | m12k wrote:
       | I ran into an annoying limitation of number inputs. I want to
       | create an input where users can step up or down by 0.5 at a time.
       | And I want to make it so that if the number starts out as
       | something that does not divide by 0.5, clicking the step buttons
       | will first round up or down to the nearest multiple of 0.5. Well
       | tough luck, that's not possible. If the number input starts with
       | the value 0.01 and a step of 0.5, then 0.0 and 0.5 are not valid
       | inputs, -0.49 and 0.51 are. And if I instead change the step to
       | 0.01 to make sure 0.0 and 0.5 even become valid inputs, then the
       | steps are super small and inconvenient for my use case, basically
       | forcing the user to type the number instead of using the step
       | buttons.
        
       | pavlov wrote:
       | The number input should have been called "scalar stepper". It's
       | genuinely useful when you have a scalar parameter and want the
       | user to be able to increment and decrement the value with a given
       | step.
        
         | marcosdumay wrote:
         | That thing is called a "spinner" almost everywhere. And yep,
         | "stepper" would be good too.
        
         | chadlavi wrote:
         | Meanwhile in ecom sites where there's a use case for this (how
         | many do you want to add to your cart?) it's always just a
         | dropdown anyway.
        
       | headsupernova wrote:
       | a fun one I've found is that the Samsung keyboard on Android
       | won't let you input negative numbers... they just omitted (-)
       | entirely from the layout.
        
       ___________________________________________________________________
       (page generated 2022-09-15 23:00 UTC)