5 ms·

Number inputs are amazingly bad. In many languages, comma is considered the correct decimal separator [1], but if your users enter that they will break the inpu

• idbehold 11y ago
  The mobile on-screen keyboards are the only reason I even attempted to use <input type="number">. I could've gotten away with using <input type="tel"> which doesn't have any type of validation associated with it, but the keyboard presented on iOS doesn't have a period key (or a comma for those other languages) which means you can only enter natural numbers. Android on the other hand does provide a way to enter periods form the "tel" on-screen keyboard. What I don't understand is why this weird validation behavior only exists for <input type="number"> and not for other input types that have built-in validation rules such as <input type="email"> and <input type="url">. Imagine an <input type="email"> reporting that its value is an empty string if the user didn't enter a completely valid email address.
  • joshuahutt 11y ago
    I actually had that exact problem, when writing an app with Ionic. It looks like a "feature" of Angular, as can be seen on their documentation [1]. [1] https://docs.angularjs.org/api/ng/input/input%5Bemail%5D https://docs.angularjs.org/api/ng/input/input%5Bemail%5D
    • idbehold 11y ago
      You can still get the actual value from DOM even if Angular is updating your model with an empty string.
  • hueving 11y ago
    Well the definition of a valid email address is very hard to get right and it can conceivably change.
    • viraptor 11y ago
      The email address format is very well defined in rfc822. What do you mean by "it can change"?
      • eru 11y ago
        Just because someone made an rfc, doesn't mean that the rfc is the de facto standard.
        • lokedhs 11y ago
          As long as the RFC is marked as such, that's exactly what it means.
          • jfarmer 11y ago
            You're confused about de facto vs. de jure. It's a common thing to be ignorant about, but maybe in the future don't be all "No, no, you're exactly wrong!" before double-checking.
            • eru 11y ago
              Though, if it's so often misunderstand perhaps I should be calling it `on paper' vs `in practice'.
        • nitrogen 11y ago
          RFCs are closer to de jure standards, even if they aren't forced by law.
          • eru 11y ago
            Exactly. And de jure doesn't make something de facto automatically.
• rhapsodic 11y ago
  > Why not just use text input? Because on iOS, `type="number"` is the only way to get a keyboard with both digits and a decimal separator. Really? How would you enter a street address into a form consisting of just text inputs?
  • tobr 11y ago
    It's the only way to default to the number keys when the keyboard comes up. The user can of course switch to it manually in a regular text input.
  • deleted 11y ago
    [deleted]
• nmjenkins 11y ago
  > Why not just use text input? Because on iOS, `type="number"` is the only way to show the number keyboard Actually, this isn't true. It will also show the number keyboard on a normal type=text input if you add a pattern="[0-9]*" property. EDIT: Sorry, misread your comment; you wanted the decimal separator too. I believe that might be impossible to get without type=number.
• foxylad 11y ago
  Adding novalidate to the form tag stops the in-built validation madness, but still gives the relevant keyboard on mobile browsers.
  • Implicated 11y ago
    Not sure how I've missed this for so long, thank you.
• Poyeyo 11y ago
  There's a way to detect the system decimal separator using JavaScript, but it only works in IE and Firefox, and it doesn't work in Chrome because it is marked as 'optional' in the standard.