Sep 2016

Safari Input Type Number Sends No DataIt's not a bug, it may be a feature

So, as many of you know, I built this site and everything behind it. The logic it's running on. I've been making websites for about 20 years, actually. I was silly enough to start when I was 15. As such, I've encountered some really stupid things in my time, but this one takes the cake.

The culprit is Safari on iOS, OSX and (probably) also on other OSes.

The Setup

Let's say that you have a form where people have to enter a number, like a code, to continue. And because people like numbers formatted, you show the code like 111 111, because that's easier to read than just six digits.

So far, so good.

Then you have an input field to, you know, actually enter the code.

Because we live in The Future(tm), we have input fields with a type "number", that allow phones and such to show a numeric keypad and to prevent other characters from being entered. As such, most browsers do one of the two following things:

  • Strip all non-numeric characters.
  • (mainly older browsers) Treat it like a normal field.

You might be figuring out by now that Safari doesn't do that.

What happens?

When you copy/paste the code (with the space in between), other browsers either strip it or leave it there. But in both cases, when you submit the form, the code is sent.

But Safari doesn't. It actually allows you to *enter* spaces, and other characters in the field, almost as if it's treating it like an old-fashioned "text" field.

But! when you submit the form (in Safari), some internal validation fails and it doesn't actually send the data.

Safari, without telling the user, is stripping data where the user entered something. No error, no little red border of "this is wrong", it just strips it from the form without telling you.

This is the most unfriendly "feature" I've ever seen in a browser. And it makes no sense.

But it gets worse!

It supports most of the other types just fine and visually it looks like it does support the "number" type (showing a numeric keypad, etc.). So to a developer and a user everything appears to be working well, but the data just mysteriously disappears.

Trying to use the HTML5 new validation features in input fields has the same problem. Modern browsers show an error message ('Please match the required format') and don't allow you to submit the form. Safari just ignores the pattern-rules and submits the data. Well, I suppose I should be happy the data isn't just removed like before.

Why is this so bad?

Because it doesn't just break standards, it removes any positive UI advantage that the number field has. And the fixes it requires are all worse than the cause.

Well done, Apple. You've managed to impress me with this "bug". And yes, I've reported it.