数字输入框怎么设计？范围、步长与单位

数字输入框要先确定单位、有效范围和步长，再分别画出空值、有效值、输入中、超出范围及不可编辑状态。加减按钮只负责按规则调整数值，直接输入要允许用户完成编辑；不能把尚未填完的内容静默改成另一个数。单位应一直可见，空白也不能默认等同于 0。

例如一张仓库补货单同时填写“饮料补货箱数”和“散装商品重量”，两个字段长得相似，允许的值却不同。用 页面与组件设计工具把它们的正常、边界和错误状态放在同一张补货单里，才能看清用户输入的数量是否与最后确认的数量一致。

这个数字能不能做加减

适合带加减按钮的，是“增加或减少一步”有明确业务含义的数值，如箱数、件数或重量。订单编号、手机号、银行卡号虽然由数字组成，却是标识，不应该因为点一下加号就变成另一个编号。邮政编码中的开头 0 也有意义，不宜使用会自动去除前导零的数值处理方式。

本例补货单约定：饮料按整箱采购，补货箱数是 1～50 的整数，每次增加 1 箱；散装商品按 0.5 千克采购，范围为 0.5～20 千克，每次增加 0.5 千克。这些上下限来自本例采购规则，不是所有数字输入框的通用标准。在画组件之前，先向业务确认最小包装单位、可用库存和是否允许不补货。

如果“不补货”是一种常见决定，可以提供独立的“本次不补货”选项，选中后将该行排除。另一种业务也可以明确允许数量为 0，但这时最小值、按钮边界和确认页必须一起改变。不能一边显示“至少 1 箱”，一边又把空白自动保存为 0，并让研发猜测两者有什么区别。

把输入中的文字与已确认数值分开

用户把 12 箱改成 8 箱，可能先全选并删除，再输入 8。删除后的短暂空白是正常编辑过程，不应立刻回填 1 或旧值 12，否则用户会感觉输入框一直在和自己争抢。同样，重量从 1 改成 1.5 时，输入到“1.”还没有结束，不能急着抹掉小数点。

可以在失去焦点或提交时检查格式，也可以在用户已明确输入越界值时给出辅助提示；关键是不要在每个按键后替用户决定最终数值。本例输入 60 箱时保留 60，并在字段下说明“最多可补货 50 箱，请修改数量”。确认按钮不接受这条无效记录，用户可以直接改成 50，也可以返回查看其他门店的需求。

“自动改成最大值”看似省一步，却可能改变采购意图。用户输入 60，系统无声保存 50，确认页又不突出变化，缺少的 10 箱很容易被忽略。确有业务需要自动修正时，修正后的值、原因和确认方式都应可见，例如明确告知已调整至本次上限，而不是仅让输入框里的数字悄悄变化。

粘贴也要沿用相同约定。粘贴“12箱”时，产品可以要求只填数字，也可以识别末尾单位后显示 12 箱，但需要一致的转换规则。不要随意删除粘贴内容中的所有非数字字符：“1.5”不能变成 15，“-2”也不能变成 2。不能识别时保留输入并说明要求，比猜一个看似合法的数值可靠。

步长、小数位和单位是三件事

步长说明每次如何增加或减少，精度说明能保留多少小数位，单位说明数字对应什么业务量。允许一位小数不代表任何一位小数都有效：本例重量保留一位小数，但只能是 0.5 的倍数，因此 1.5 千克有效，1.2 千克仍需修改。

当用户直接输入 1.2 时，应说明“请按 0.5 千克填写，例如 1、1.5 或 2”，而不是只写“格式错误”。如果产品决定提供就近调整，也要让用户选择具体结果，不能默默把 1.2 改为 1.0 或 1.5。对金额或计费重量，舍入更可能改变实际结果，应由业务规则定义取舍和计算顺序。

固定单位放在输入区域旁，并保留字段名称；不要只在 placeholder 里写“请输入重量（千克）”，因为用户填入后单位就消失了。单位可以更换时，切换千克和克应保持所代表的实际重量。例如 1.5 千克换成 1500 克，步长也从 0.5 千克对应到 500 克，不能只改单位文字仍留下数字 1.5。

显示值和编辑值也可以不同。数量很大时用分组符帮助阅读，但用户进入编辑后仍应容易定位数字；格式化不要反复移动光标。Ant Design 的 InputNumber 文档把范围、步长、精度和格式化分别列出，正是因为一个参数不能替其他参数决定全部行为。设计说明也应逐项写清，不能只交付“数字输入框，默认样式”。

到达上限时，按钮和键盘要说同一件事

箱数为 1 时，减号不可继续减少；为 50 时，加号不可继续增加。达到边界后按钮的不可用状态要清楚，但不要把整个字段禁用，用户仍应能直接改成 30。若数值由其他规则锁定，则显示只读原因，例如“该数量由已确认的采购单确定”，让“无法继续增加”和“整个字段不可编辑”有所区别。

用户从输入框切到加号后连续操作，焦点不应跳到页面顶部或其他行。采用步进控件时，可按 W3C 的 Spinbutton 模式设计上下方向键的增减行为，并把当前值及上下界传达给辅助技术；常规文本选择、光标移动和删除也应正常工作。是否提供更大步进属于附加选择，不能让用户不知情地从 1 箱跳到 10 箱。

手机端需要给数字和小数输入留出合适键盘路径，同时保留可点击的增减按钮。按钮太小容易连点误触，过大的按钮又可能挤压输入值。应拿“50 箱”和“19.5 千克”这种接近最长的内容测试，而不是只看一位数。滚动长表单时也不要让悬停或触碰字段意外修改数量。

在补货单上同时检查上下限和提示

在 Pixso 画布中保留商品名、当前可补货量、数量字段和本行提示，不能只截出孤立输入框。为饮料行画出空白、12 箱、50 箱和输入 60 箱四种状态；为散装商品行画出 0.5、1.5 和无效的 1.2 千克。字段宽度、单位位置和提示出现后的行高，都在同一张补货单里比较。

重点看两个画面：饮料为 50 箱时加号不可用但数字仍可编辑；重量为 1.2 千克时，输入值保留，下面解释 0.5 千克的采购步长。把这两种情形放在相邻行，可以清楚看出“达到合法上限”与“当前值不合法”不能共用一套红色错误样式。

旁边再放一份确认清单，只保留商品、最终数量和单位。让同事从输入区读出自己要下的补货量，再与确认清单逐行对照。如果输入区显示 1.5 千克，确认区却只有 1.5 而没有单位，即使按钮和边框都画对了，交付仍缺一条重要信息。

库存变了，别把旧上限继续当成承诺

实际补货中，上限可能随库存变化。用户打开页面时可补 50 箱，提交前只剩 40 箱，字段不能继续用旧上限保证成功，也不能直接替用户扣成 40 箱。本例显示新的可补数量，保留原输入，标出需要修改的商品，再让用户确认调整后的清单。

界面约束只能帮助输入，不能替代服务端的业务校验；返回数量不足时，错误要落到对应商品行，并保留其他已填正确的数量。整张单同时存在必填、条件联动和提交错误时，可继续参考 B端表单的字段与校验设计，把数值规则放回完整表单，而不是为每个输入框各写一套互相冲突的提示。

交付数字输入框时，最终应能回答这几个具体问题：12 箱改成 8 箱能否顺利删除重填；1.2 千克为什么不能提交；50 箱时哪些动作仍可用；库存减少后原输入保留在哪里。用户始终能理解自己输入了什么、哪里需要修改、最终会提交多少，组件才真正完成了任务。