输入数字

InputNumber 是一个提供数值输入的输入组件。

导入#


import { InputNumber } from 'primereact/inputnumber';

数字#

InputNumber 用作具有 value 和 onValueChange 属性的受控输入。

仅限整数

不分组

最小-最大小数位数

最小-最大边界


<InputNumber value={value1} onValueChange={(e) => setValue1(e.value)} />
<InputNumber value={value2} onValueChange={(e) => setValue2(e.value)} useGrouping={false} />
<InputNumber value={value3} onValueChange={(e) => setValue3(e.value)} minFractionDigits={2} maxFractionDigits={5} />
<InputNumber value={value4} onValueChange={(e) => setValue4(e.value)} min={0} max={100} />

区域设置#

分组和十进制符号等本地化信息通过 locale 属性定义，该属性默认为用户区域设置。

用户区域设置

美国区域设置

德国区域设置

印度区域设置


<InputNumber value={value1} onValueChange={(e) => setValue1(e.value)} minFractionDigits={2} />
<InputNumber value={value2} onValueChange={(e) => setValue2(e.value)} locale="en-US" minFractionDigits={2} />
<InputNumber value={value3} onValueChange={(e) => setValue3(e.value)} locale="de-DE" minFractionDigits={2} />
<InputNumber value={value4} onValueChange={(e) => setValue4(e.value)} locale="en-IN" minFractionDigits={2} />

货币#

通过将 mode 属性设置为 currency 来启用货币值。在此设置中，还需要使用 ISO 4217 标准（例如美元的“USD”）定义 currency 属性。

美国

德国

印度

日本


<InputNumber inputId="currency-us" value={value1} onValueChange={(e) => setValue1(e.value)} mode="currency" currency="USD" locale="en-US" />
<InputNumber inputId="currency-germany" value={value2} onValueChange={(e) => setValue2(e.value)} mode="currency" currency="EUR" locale="de-DE" />
<InputNumber inputId="currency-india" value={value3} onValueChange={(e) => setValue3(e.value)} mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
<InputNumber inputId="currency-japan" value={value4} onValueChange={(e) => setValue4(e.value)} mode="currency" currency="JPY" locale="jp-JP" />

前缀和后缀#

可以使用 prefix 和 suffix 属性将自定义文本（例如单位）放置在输入部分的之前或之后。

英里

百分比

有效期

温度


<InputNumber value={value1} onValueChange={(e) => setValue1(e.value)} suffix=" mi" />
<InputNumber value={value2} onValueChange={(e) => setValue2(e.value)} prefix="%" />
<InputNumber value={value3} onValueChange={(e) => setValue3(e.value)} prefix="Expires in " suffix=" days" />
<InputNumber value={value4} onValueChange={(e) => setValue4(e.value)} prefix="&uarr; " suffix="℃" min={0} max={40} />

按钮#

使用 showButtons 属性启用微调器按钮，并使用 buttonLayout 定义布局。

堆叠

最小-最大边界

带步长的水平


<InputNumber value={value1} onValueChange={(e: InputNumberValueChangeEvent) => setValue1(e.value)} showButtons mode="currency" currency="USD" />
<InputNumber value={value3} onValueChange={(e: InputNumberValueChangeEvent) => setValue3(e.value)} mode="decimal" showButtons min={0} max={100} />
<InputNumber value={value2} onValueChange={(e: InputNumberValueChangeEvent) => setValue2(e.value)} showButtons buttonLayout="horizontal" step={0.25}
            decrementButtonClassName="p-button-danger" incrementButtonClassName="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"
            mode="currency" currency="EUR" />

垂直#

还可以通过将 buttonLayout 设置为 vertical 来垂直放置按钮。


<InputNumber value={value} onValueChange={(e) => setValue(e.value)} showButtons buttonLayout="vertical" style={{ width: '4rem' }} 
    decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />

浮动标签#

当聚焦时，浮动标签会出现在输入字段的顶部。有关详细信息，请访问浮动标签文档。

数字


<FloatLabel>
    <InputNumber id="number-input" value={value} onValueChange={(e) => setValue(e.value)} />
    <label htmlFor="number-input">Number</label>
</FloatLabel>

填充#

将 variant 属性指定为 filled，以显示具有比默认 outlined 样式更高的视觉强调的组件。


<InputNumber variant="filled" value={value} onValueChange={(e) => setValue(e.value)} mode="decimal" minFractionDigits={2} />

无效#

使用 invalid 属性显示无效状态，以指示验证失败。在与表单验证库集成时，可以使用此样式。


<InputNumber invalid value={value} onValueChange={(e) => setValue(e.value)} mode="decimal" minFractionDigits={2} />

禁用#

当存在 disabled 时，无法编辑和聚焦该元素。


<InputNumber value={value} disabled prefix="%" />

可访问性#

屏幕阅读器

可以通过 label 标签与 inputId 属性结合使用，或使用 aria-labelledby、aria-label 属性来提供描述组件的值。输入元素除了使用 spinbutton 角色外，还使用 aria-valuemin、aria-valuemax 和 aria-valuenow 属性。请确保为 span 和 input 分配唯一标识符。


<label htmlFor="input-price">Price</label>
<InputNumber id="span-price" inputId="input-price" />

<span id="label_number">Number</span>
<InputNumber aria-labelledby="label_number" />

<InputNumber aria-label="Number" />

键盘支持

键	功能
tab	将焦点移到输入。
向上箭头	增加值。
向下箭头	减小值。
home	如果提供，则设置最小值。
end	如果提供，则设置最大值。