When exploit the HTML standards and when to overwrite/change/force these?

The UX team and the FED team are arguing for days on a request from a customer about a test field “type = number”.
The current implementation is HTML standards-compliant and leans to W3C specifications regarding the concept of “[Integer]”

According to the customer, this field should accept only the numbers 0 through 9. He wants to block users to inserting “- + . ,” his request to us is to “force/overwrite” the attribute itself.

Obviously, there are bunch of solutions to achieve what the customer requires, but:

  • All of these solutions are via JS
  • It would change the nature of the text field (especially in terms of accessibility)
  • Is an expensive solution in terms of maintenance

our UX solution is:

  • Respect the semantics of HTML and the browser behavior (ex Chrome vs IE)
  • Optimize the label describing that the field accepts only integers
  • Publish an self-explanatory placeholder like “ex. 14568975”

What do you think, in general, to change the natural behaviour of HTML objects?

We had this exact same issue. In the end we changed it back to a plain text field and implemented JS to allow people to only enter 0-9. However, the other option we looked at was changing it to a ‘phone’ type field, which would have caused issues for accessibility but does provide only 0-9 as options (I think)

1 Like

hi @jacquidow

this is an interesting approach but:

  • in the XS and SM viewports users will receive the dial pad instead the numeric keyboard (ok it’s not a massive UX issue)
  • it’s not 100% cross-browsers compatible

I’m confident that providing a better label and a self-explanatory placeholder will help customers to understand how to fill the control.
It’s already a great achievement, to me, to have POs and DEVs aligned in providing the same solution :slight_smile: :slight_smile:

just for your information we decided to not provide any extra features (JS) to block the inputing phase.
We defined a new label and a self-expllantory (I hope) placeholder :slight_smile:
Let’s see what will happen

2 Likes