输入文本

InputText 是标准输入元素的扩展，具有主题和按键过滤功能。

导入#


import { InputText } from 'primereact/inputtext';

基本#

InputText 用作受控输入，具有value和onChange属性。


<InputText value={value} onChange={(e) => setValue(e.target.value)} />

按键过滤#

InputText 具有内置的按键过滤支持，可阻止某些按键，有关更多信息，请参阅按键过滤页面。


<InputText keyfilter="int" placeholder="Integers" />

尺寸#

应用 .p-inputtext-sm 可缩小输入元素的大小，或应用 .p-inputtext-lg 可放大它。


<InputText type="text" className="p-inputtext-sm" placeholder="Small" />
<InputText type="text" placeholder="Normal" />
<InputText type="text" className="p-inputtext-lg" placeholder="Large" />

帮助文本#

可以使用语义化的 small 标签定义提示文本。

用户名输入您的用户名以重置密码。


<div className="flex flex-column gap-2">
    <label htmlFor="username">Username</label>
    <InputText id="username" aria-describedby="username-help" />
    <small id="username-help">
        Enter your username to reset your password.
    </small>
</div>

浮动标签#

当输入字段获得焦点时，浮动标签会出现在输入字段的顶部。有关更多信息，请访问浮动标签文档。

用户名


<FloatLabel>
    <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
    <label htmlFor="username">Username</label>
</FloatLabel>

填充#

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


<InputText variant="filled" value={value} onChange={(e) => setValue(e.target.value)} />

无效#

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


<InputText invalid />

禁用#

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


<InputText disabled placeholder="Disabled" />

无障碍#

屏幕阅读器

InputText 组件呈现一个原生输入元素，该元素隐式包含任何传递的属性。描述组件的值可以通过与id属性结合使用的label标签提供，也可以使用aria-labelledby, aria-label属性。


<label htmlFor="firstname">Firstname</label>
<InputText id="firstname" />

<span id="lastname">Lastname</span>
<InputText aria-labelledby="lastname" />

<InputText aria-label="Age"/>

键盘支持

按键	功能
tab	将焦点移动到输入框。