代码演示
如何引入
基本输入框
隐藏步进器
通过innerButtons,你可以将右侧的步进器隐藏进内部,仅hover时才会显示
hideButtons设为true,彻底隐藏步进器
尺寸
自定义显示格式与解析方式
formatter 和 parser 一对方法,一般需要同时设置,否则无法正确解析值
纯数字输入框
搭配 formatter 和 onNumberChange(>=v1.9.0) 可以实现纯数字输入框。
API 参考
属性 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
autofocus | 自动获取焦点 | boolean | false | |
className | 类名 | string | - | |
defaultValue | 默认值 | number | ||
disabled | 禁用 | boolean | false | |
formatter | 指定输入框展示值的格式 | (value: number|string) => string | - | |
hideButtons | 为 true 时隐藏 “上/下” 按钮 | boolean | false | 1.0.0 |
innerButtons | 为 true 时 “上/下” 按钮显示在输入框内部 | boolean | false | 1.5.0 |
insetLabel | 前缀标签,优先级低于 prefix | string|ReactNode | ||
keepFocus | 点击按钮时保持输入框聚焦 | boolean | false | 1.10.0 |
max | 限定最大值 | number | Infinity | |
min | 限定最小值 | number | -Infinity | |
parser | 指定从 formatter 里转换回数字串的方式,和 formatter 搭配使用 | (str: string) => string | - | |
precision | 数值精度 | number | - | |
prefixCls | 前缀内容 | string|ReactNode | ||
pressInterval | 长按按钮时,多久触发一次点击事件,单位毫秒 | number | 250 | |
pressTimeout | 长按按钮时,延迟多久后触发点击事件,单位毫秒 | number | 250 | |
preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素,作用于组件内的 focus 方法 | boolean | ||
shiftStep | 按住 shift 键每次改变步数,可以为小数,v2.13 默认值由 1 调整为 10 | number | 10 | 1.5.0 |
showClear | 是否显示清除按钮 | boolean | false | 0.35.0 |
size | 输入框大小,可选值:"default"|"small"|"large" | string | 'default' | |
step | 每次改变步数,可以为小数 | number | 1 | |
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)