输入类 · InputNumber
数字输入框
通过鼠标或键盘,输入范围内的数值,与 Input 不同的是它带有针对数字场景的步进器操作区,配合 Parser 使用可以展示更复杂的内容格式

代码演示

如何引入

基本输入框

隐藏步进器

通过innerButtons,你可以将右侧的步进器隐藏进内部,仅hover时才会显示
hideButtons设为true,彻底隐藏步进器

尺寸

自定义显示格式与解析方式

formatter 和 parser 一对方法,一般需要同时设置,否则无法正确解析值

纯数字输入框

搭配 formatter 和 onNumberChange(>=v1.9.0) 可以实现纯数字输入框。

API 参考

属性说明类型默认值版本
autofocus自动获取焦点booleanfalse
className类名string-
defaultValue默认值number
disabled禁用booleanfalse
formatter指定输入框展示值的格式(value: number|string) => string-
hideButtonstrue 时隐藏 “上/下” 按钮booleanfalse1.0.0
innerButtonstrue 时 “上/下” 按钮显示在输入框内部booleanfalse1.5.0
insetLabel前缀标签,优先级低于 prefixstring|ReactNode
keepFocus点击按钮时保持输入框聚焦booleanfalse1.10.0
max限定最大值numberInfinity
min限定最小值number-Infinity
parser指定从 formatter 里转换回数字串的方式,和 formatter 搭配使用(str: string) => string-
precision数值精度number-
prefixCls前缀内容string|ReactNode
pressInterval长按按钮时,多久触发一次点击事件,单位毫秒number250
pressTimeout长按按钮时,延迟多久后触发点击事件,单位毫秒number250
preventScroll指示浏览器是否应滚动文档以显示新聚焦的元素,作用于组件内的 focus 方法boolean
shiftStep按住 shift 键每次改变步数,可以为小数,v2.13 默认值由 1 调整为 10number101.5.0
showClear是否显示清除按钮booleanfalse0.35.0
size输入框大小,可选值:"default"|"small"|"large"string'default'
step每次改变步数,可以为小数number1
style样式CSSProperties-
suffix自定义后缀ReactNode
value当前值number
onBlur失去焦点时的回调(e: domEvent) => void() => {}1.0.0
onChange变化回调(value: number|string) => void-
onFocus获得焦点时的回调(e: domEvent) => void() => {}1.0.0
onNumberChange数字变化回调(value: number) => void-1.9.0

Methods

名称描述
blur()移出焦点
focus()获取焦点

Accessibility

ARIA

  • 数字输入框具有 spinbutton role
  • spinbutton 使用 aria-valuenow 表示当前值,aria-valuemax 表示可以接受的最大值,aria-valuemin 表示可以接受的最小值
  • 当 InputNumber 在 Form 中使用时,输入框的 aria-labeledby 指向 Field label

键盘和焦点

  • InputNumber 可被获取焦点,键盘用户可以使用 Tab 及 Shift + Tab 切换焦点(增加/减少按钮不可以被键盘聚焦)
  • 键盘用户可以按上键 ⬆️ 或下键 ⬇️ ,输入值将增加或减少 step(默认值为 1)
  • 按住 Shift + 上键 ⬆️ 或下键 ⬇️ ,输入值将增加或减少 shiftStep(默认值为 10)

设计变量

© 2021 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED