购买数量、提醒间隔分钟、分页页码、房间人数、预算金额。它们能被加减、比较、按步长对齐。
界面与交互 · 操作与输入
数字输入框InputNumber
只接受数字并可带步进控制的输入控件；值、单位、范围、步进和越界处理要长在物件上。
调整购买数量，看结果长在物件上
数字输入框不只是「只能输数字」。值、单位、范围、步进和越界处理五件套，要在数字物件本身看得见。
你是买家。库存 12 件，可按单件或 2 件/包 下单。 用 ＋/− 步进、直接键入、切换规格，观察数值、按钮和提交按钮都长在数字物件上。
购买数量范围内，可提交
2件
范围 1–12 件 · 当前步长 1 件 · 越界即锁提交原因：2 在 1–12 件内，且为步长 1 的倍数。下一步：点「加入购物车」提交，或继续用 ＋/− 与键盘调整。对照：超出 12 或非步长倍数时，物件本身会变红并锁住提交。
数字输入的五件套
刚才面板里出现过的五件事，命名一下。
- 值当前数量的确切数字，必须带单位一起显示，例如「12 件」而不是孤零零的 12。
- 单位件、分钟、人、页——单位决定语义，没有单位的数字几乎都是错的。
- 范围最小值和最大值来自业务（库存、容量、预算），触顶触底要让按钮自己禁用并说明。
- 步进每次增减多少。步长 1 收任意整数，步长 2 只收偶数；切换规格时已有值要对齐。
- 越界处理超出范围或不对齐步长时，物件变红、提交锁住、给出原因和下一步，而不是静默改值。
什么时候用它
看到「可计算、可比较、有单位、有范围」这组信号，才考虑数字输入框。
手机号、身份证号、邮编、银行卡号。它们全数字却是「标识符」：不能加减、不能舍入、前导 0 有意义。
怎么用对，避开两个坑
数量类用 type=number 时必带 min/max/step 和越界即时反馈；标识符千万别用 type=number。
- 数量字段：
<input type="number" min max step aria-describedby>，越界即时锁住提交并说明，不静默改值。 - 滚轮坑：
type="number"在字段上滚动会误改值。本页面演示用onWheel主动失焦防止误改，你也隐藏 spinner 或改用type="text" inputMode="numeric"。 - 标识符坑：手机号等用
type="tel"或type="text" inputMode="numeric" pattern，不要用type="number"。 - 增减按钮和直接键盘输入都要可用；触顶触底时按钮自己禁用并贴出原因。
正反例：收集手机号
同一个目标，只换一个关键字段类型，结果差很多。
滚轮误触会改值、前导 0 被丢掉、无法粘贴带空格或 +86 的格式，还会被浏览器当成可加减的数值。
标识符语义清晰，不会被加减和舍入；移动端给电话键盘；配合 pattern 和 autocomplete="tel" 还能校验和 autofill。
快速自测
结算页要收集收件人手机号，应该用哪种字段？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。