设计与产品technology.blog.gov.uk
为什么 GOV.UK 设计系统团队改变了数字输入框的类型
Why the Gov.uk Design System team changed the input type for numbers
2020 — 2022，它一次次回到首页
黑点是上首页（≥ 50 分）的那次投稿，空心点是没冲上去的投稿，点越大分数越高。
导读
英国政府 GOV.UK 设计系统团队解释了他们为什么把数字输入框从 `<input type="number">` 换成 `type="text" inputmode="numeric" pattern="[0-9]*"`。按 HTML 规范，number 类型只适用于会被解析成 JavaScript 数值、且增减有意义的数据，而信用卡号、邮编、国民保险号这类"看起来是数字的标识符"并不属于此列；加上滚动误改值、移动端键盘等问题，他们最终放弃了它。
为什么经久不衰：它用规范原文和真实表单场景说清了一个反直觉的细节，且十多年后浏览器对 number 输入的处理依然坑多，是前端表单设计的常读参考。
HN 评论精选
从规范角度总结问题，并给出替代写法。
简而言之，主要问题在于：按规范，`<input type="number">` 只用于会被解析成 JavaScript 数字的输入，对它做递增、递减等数值操作必须说得通。它不该用于那些恰好由数字组成的字符串或标识符，比如信用卡号。我承认这让我有点意外，但确实有几分道理。解决方案是用 `<input type="text" inputmode="numeric" pattern="[0-9]*">`。
ChrisSD查看英文原文
In summary the main issue is that, according to the spec, `<input type="number">` is only for numbers that are going to be parsed into a Javascript number. It has to make sense to increment, decrement or do other numerical operations on it. It's not to be used for strings or identifiers that just so happen to be numbers, e.g. credit card numbers. I'll admit this is slightly surprising to me but it does make a certain amount of sense. The solution is to use `<input type=”text” inputmode=”numeric” pattern="[0-9]*">`.
邮编等前导零标识符存成整数会丢数据。
同样提醒一下：美国邮政编码不是数字，我们东北部很多邮编以零（甚至两个零）开头。所以别把它们存成整数，波士顿是 02108，不是 2108。
vitaliyf查看英文原文
Similarly, here is your reminder than US Zip Codes aren't numbers, because many of us here in the Northeast have them start with a zero (or even two). So don't store them as integers, because Boston is 02108, not 2108. See https://en.wikipedia.org/wiki/List_of_ZIP_Code_prefixes
number 输入在不同地区的小数点处理不一致，金额场景也不可靠。
`type="number"` 还有个这篇博文没提到的问题——当然也情有可原（毕竟是英国站点）——不同版本的 Android 会按区域设置提供 "." 或 "," 作小数点，甚至两个都不给。有些手机无论你怎么坚持逗号区域，也只提供 "."。最后我们不得不改用 `type="text" inputmode="numeric"`，并把 "." 和 "," 都当作小数分隔符解析。反正大多数人也不会去输千位分隔符。这些字段是金额，是真正的数字而非纯数字文本，可一旦离开英语环境，`type="number"` 连真正的数字都处理不好。
Svip查看英文原文
Another problem with `type="number"`, that this blog post does not mention - although for good reason (it's British) - is that different versions of Android will provide either "." or "," decimal pointer, depending on locale or not at all. Some phones - regardless of how much you insist on a comma-locale - would still provide "." as the only option. Eventually, we had to switch to `type="text" inputmode="numeric"` and interpret both "." and "," as a decimal separator. Most people won't bother to enter thousand separators anyway. These numbers were amounts, i.e. actual numbers, and not text fields with only digits, so `type="number"` doesn't even work for actual numbers, as soon as you move beyond English.
卡号应按 4 位分组显示，便于人工核对纠错。
文章举了信用卡号字段被当作"数字"的例子。网购多次后我发现，现在遇到不允许输入空格或短横线、也不会自动格式化的卡号输入框就很烦躁。应该允许输入空格和短横线，再用 JS 或后端去掉。卡上印的号码按 4 位分组是有原因的，我认为这更便于人阅读。提交后提示"卡号无效"时，我得盯着卡片和屏幕来回扫那一长串数字找出打错的那一位，这太蠢了。
zxcvgm查看英文原文
The article shows an example of a credit card field being a "number". Having made several online purchases, I realized I'm now frustrated by a CC number field that doesn't allow any spaces or dashes, or doesn't format it visually this way for you. They should just allow dashes/spaces then strip it using JS or at the backend. There is a reason that the number printed on the credit card is grouped into 4 digits, and I believe that it makes human parsing easier. When I submit the form and it says "invalid card number", trying to figure out which digit I mistyped into the form while scanning that long string of digits with my eyes, gazing at the card and back at the screen is just stupid.
历次讨论
同类还值得读
贝塞尔曲线入门
A Primer on Bézier Curves
Pomax 编写的贝塞尔曲线在线教程，从基础概念一路讲到曲线求交、投影、曲率等进阶内容，并配有可交互的示例和配套的 bezier.js 库。
设计与产品上首页 7 次 · 2014–2022pomax.github.io编辑精选WebGL 水面模拟
WebGL Water
Evan Wallace 制作的 WebGL Water 演示：在浏览器里实时渲染一片水面，展示折射、反射和焦散等 GPU 图形效果。
设计与产品上首页 6 次 · 2011–2025madebyevan.com设计建议：永远不要使用黑色
Design Tip: Never Use Black
设计随笔提出“永远不要用纯黑”的建议，主张在界面和绘画中改用深灰或带色相的暗色，并借阴影与色彩关系来论证。
设计与产品上首页 5 次 · 2012–2021ianstormtaylor.com用于思考不可想象之物的媒介
Media for Thinking the Unthinkable
Bret Victor 的这个页面围绕《Media for Thinking the Unthinkable》展开，探讨我们用来思考和表达复杂问题的媒介，以及以文字/符号为主的传…
设计与产品上首页 5 次 · 2013–2020worrydream.com编辑精选页面重量很重要
Page Weight Matters
博文讲 YouTube 工程师 Chris Zacharias 的一次页面瘦身实验：团队做了一个更轻量的页面版本，起初从整体平均加载时间看反而更慢；按地理区域分层后才发现，轻量版…
设计与产品上首页 4 次 · 2012–2022blog.chriszacharias.com