数字邮政编码的 HTML

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分!

我刚刚在 Twitter 上听到这段讨论,由 Dave 发起

看起来邮政编码只是数字,对吧?所以……

<input id="zip" name="zip" type="number">

优势在于能够利用浏览器提供的免费验证,并在移动设备上触发更有用的基于数字的键盘。

但 Zach 指出,对于邮政编码来说,type="number" 存在问题,因为邮政编码可能包含前导零(例如,波士顿的邮政编码可能是 02119)。 Filament group 还有一个 小型库 用于解决此问题。

正如 Jeremy 建议的那样,这是 inputmode 的完美应用场景。

<input id="zip" name="zip" type="text" inputmode="numeric" pattern="^(?(^00000(|-0000))|(\d{5}(|-\d{4})))$">

但在撰写本文时,其支持度 非常糟糕

一些人提到尝试为此劫持 type="tel",但这也有其自身的缺点,例如拒绝格式正确的 9 位数邮政编码。

因此,尽管邮政编码看起来像数字,但最好将其视为字符串处理。 另一个选择是将其保留为 text 输入,但使用 pattern 强制使用数字,正如 Pamela Fox 所记录的那样。

<input id="zip" name="zip" type="text" pattern="[0-9]*">

正如许多人在评论中指出的那样,值得注意的是,邮政编码的数字模式最适合美国,因为许多其他国家的代码包含数字 *和* 字母。