InputNumber
受约束的数值录入框，含步进按钮、键盘步进、精度与范围 clamp，复用 Input 视觉。
如何引入
import { InputNumber } from '@chenzy-design/svelte';基础用法
支持格式化、滚轮调值、strict 越界模式、两侧按钮、内嵌按钮、前后缀。
¥ 元
%
基础数字输入
最小最大值限制、两侧按钮布局、前后缀装饰。
¥ 元
范围与步进
min/max 限制、step/shiftStep 步进、strict 越界拒绝。
°C
%
小数精度
precision 控制小数位数，自动四舍五入归一化。
¥
kg
格式化与解析
formatter/parser 实现千分位、货币、百分比显示。
尺寸与状态
small/large 尺寸、内嵌按钮、disabled/readonly 状态。
步进器显隐
innerButtons 内嵌步进器（hover/focus 显示），hideButtons 彻底隐藏。
小时
纯数字回调
onNumberChange 携带 number 类型的值，配合 formatter 实现千分位纯数字输入。
科学计数法
scientificNotation 失焦显示科学计数法，聚焦显示完整数字；可自定义阈值。
货币展示
currency + localeCode 按地区展示对应货币，currencyDisplay 控制符号/代码/名称。
按 localeCode 展示对应货币
currencyDisplay：symbol / code / name
隐藏货币符号
showCurrencySymbol=false 隐藏内置符号，配合 prefix/suffix 自行展示货币。
showCurrencySymbol=false + prefix/suffix 自定义
￥
人民币
API 参考
InputNumber
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value | 受控值；提供则为受控 | number | null | undefined |
defaultValue | 非受控初始值 | number | null | null |
min | — | number | -Infinity |
max | — | number | Infinity |
step | — | number | 1 |
shiftStep | Shift+↑↓ 步长 | number | step * 10 |
precision | 失焦四舍五入保留小数位 | number | undefined |
boundaryMode | 越界处理：钳制 / 拒绝回滚 | 'clamp'|'strict' | clamp |
formatter | 自定义显示格式化（仅非编辑态） | (n: number) => string | undefined |
parser | 自定义解析 | (s: string) => number | undefined |
size | — | 'small'|'default'|'large' | default |
disabled | — | boolean | false |
readonly | — | boolean | false |
status | — | 'default'|'warning'|'error' | default |
controls | 是否显示步进按钮 | boolean | true |
controlsPosition | 步进按钮布局：右侧 stacked / 两侧 | 'right'|'sides' | right |
innerButtons | 按钮内嵌悬浮（hover/focus 显形） | boolean | false |
keyboard | 是否启用 ↑↓/PageUp·Down 步进 | boolean | true |
mouseWheel | 聚焦时滚轮步进 | boolean | false |
placeholder | — | string | undefined |
prefix | 输入框前置内容（如货币符号、单位） | string | Snippet | undefined |
suffix | 输入框后置内容（如单位 %、kg） | string | Snippet | undefined |
name | — | string | undefined |
id | input 元素 id，关联外部 label | string | 自动生成 |
ariaLabel | — | string | undefined |
autofocus | 挂载自动聚焦 | boolean | false |
selectOnFocus | 聚焦时全选文本 | boolean | false |
locale | 数字格式化 locale（仅未提供 formatter 时生效） | string | undefined |
borderless | 无边框模式 | boolean | false |
showClear | 显示清除按钮（有值时出现 ×） | boolean | false |
clearIcon | 自定义清除图标 | Snippet | undefined |
keepFocus | 点击 +/- 按钮后保持输入框聚焦 | boolean | false |
onChange | 归一化后值变化 | (v: number | null) => void | undefined |
onNumberChange | 携带 number 类型的变化回调（区别于 onChange） | (v: number | null) => void | undefined |
onBoundaryHit | 触达/试图越过边界 | (e: { boundary: 'min'|'max'; value: number }) => void | undefined |
hideButtons | 彻底隐藏步进按钮（对齐 Semi；优先于 controls） | boolean | false |
preventScroll | 命令式 focus() 时是否阻止滚动文档（对齐 Semi） | boolean | false |
pressTimeout | 长按后延迟多久开始连续步进（ms，对齐 Semi） | number | 250 |
pressInterval | 长按连续步进的间隔（ms，对齐 Semi） | number | 250 |
scientificNotation | 失焦时超阈值（默认 15 位）显示科学计数法，聚焦显示完整数字；仅影响显示，onChange/onNumberChange 仍为完整 number（对齐 Semi） | boolean | { threshold?: number } | false |
currency | 货币展示：true 按 localeCode 自动推断币种，字符串（CNY/EUR/USD/JPY…）指定币种码；Intl.NumberFormat currency 格式化，仅显示层，值仍为完整 number（对齐 Semi） | boolean | string | false |
currencyDisplay | 货币展示方式：符号 ￥ / 代码 CNY / 名称 人民币（对齐 Semi） | 'symbol'|'code'|'name' | 'symbol' |
localeCode | 货币格式化 BCP-47 locale（zh-CN/de-DE/ja-JP…），决定千分位/小数位/符号位置；回退 locale 再回退 zh-CN（对齐 Semi） | string | undefined |
showCurrencySymbol | false 时隐藏内置货币符号/代码/名称（用 decimal 千分位），供 prefix/suffix 自行展示（对齐 Semi） | boolean | true |
class | 根节点自定义类名（对齐 Semi className） | string | undefined |
style | 根节点自定义内联样式（对齐 Semi style） | string | undefined |
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
change | { value: number | null } | 归一化后值变化（受控核心事件） |
boundaryHit | { boundary: 'min'|'max'; value: number } | 触达/试图越过边界 |
step | { value: number; direction: 'up'|'down'; source: 'button'|'keyboard'|'wheel' } | 任一步进动作完成 |
focus | FocusEvent | 聚焦 |
blur | FocusEvent | 失焦（已完成 commit 归一化） |
keydown | KeyboardEvent | 透传原生 keydown |
Methods
| 属性 | 类型 | 说明 |
|---|---|---|
focus() | — | 命令式聚焦输入框（尊重 preventScroll，对齐 Semi） |
blur() | — | 命令式移除焦点（对齐 Semi） |
Accessibility
| ARIA role | spinbutton |
| 键盘交互 | ArrowUpArrowDownShift+ArrowUpShift+ArrowDownPageUpPageDownEnter |
- input role=spinbutton + aria-valuenow/valuemin/valuemax
- 失焦按 precision 四舍五入并 clamp 到 [min,max]
- 到 min/max 时对应步进按钮 disabled
- 步进按钮 tabindex=-1，mousedown.preventDefault 不夺焦
- disabled→aria-disabled，readonly→aria-readonly，error→aria-invalid
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-transition-delay-input-bg | var(--cd-motion-delay-none) | 输入框-背景色-延迟时间 |
--cd-transition-delay-input-border | var(--cd-motion-delay-none) | 输入框-边框-延迟时间 |
--cd-transition-delay-input-text | var(--cd-motion-delay-none) | 输入框-文字或图标-延迟时间 |
--cd-transition-duration-input-bg | var(--cd-motion-duration-none) | 输入框-背景色-动画持续时间 |
--cd-transition-duration-input-border | var(--cd-motion-duration-none) | 输入框-边框-动画持续时间 |
--cd-transition-duration-input-text | var(--cd-motion-duration-none) | 输入框-文字或图标-动画持续时间 |
--cd-transition-function-input-bg | var(--cd-motion-ease-in) | 输入框-背景色-过渡曲线 |
--cd-transition-function-input-border | var(--cd-motion-ease-in) | 输入框-边框-过渡曲线 |
--cd-transition-function-input-text | var(--cd-motion-ease-in) | 输入框-文字或图标-过渡曲线 |