输入文本

InputText 是标准输入元素的扩展，具有主题功能。

导入 #


import InputText from 'primevue/inputtext';

基本 #

InputText 用作具有 v-model 属性的受控输入。


<InputText type="text" v-model="value" />

浮动标签 #

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

用户名


<FloatLabel>
    <InputText id="username" v-model="value" />
    <label for="username">Username</label>
</FloatLabel>

尺寸 #

InputText 提供小和大尺寸作为标准尺寸的替代方案。


<InputText v-model="value1" type="text" size="small" placeholder="Small" />
<InputText v-model="value2" type="text" placeholder="Normal" />
<InputText v-model="value3" type="text" size="large" placeholder="Large" />

帮助文本 #

可以使用语义小标签定义提示文本。

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


<div class="flex flex-col gap-2">
    <label for="username">Username</label>
    <InputText id="username" v-model="value" aria-describedby="username-help" />
    <small id="username-help">Enter your username to reset your password.</small>
</div>

填充 #

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


<InputText type="text" v-model="value" variant="filled" />

无效 #

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


<InputText v-model="value" :invalid="value === null"  />

禁用 #

当存在 disabled 时，元素不可编辑且不可聚焦。


<InputText v-model="value" disabled placeholder="Disabled" />

无障碍 #

屏幕阅读器

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


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

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

<InputText aria-label="Age"/>

键盘支持

键	功能
tab	将焦点移至输入。