文本输入

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

导入 #


import InputText from 'primevue/inputtext';

基本 #

InputText 与 v-model 属性一起使用进行双向值绑定。


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

表单 #

InputText 与 PrimeVue 表单库无缝集成。


<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
    <div class="flex flex-col gap-1">
        <InputText name="username" type="text" placeholder="Username" />
        <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error?.message }}</Message>
    </div>
    <div class="flex flex-col gap-1">
        <InputText name="email" type="text" placeholder="Email" />
        <Message v-if="$form.email?.invalid" severity="error" size="small" variant="simple">{{ $form.email.error?.message }}</Message>
    </div>
    <Button type="submit" severity="secondary" label="Submit" />
</Form>

填充 #

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


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

浮动标签 #

FloatLabel 在视觉上将标签与其表单元素集成在一起。请访问浮动标签文档了解更多信息。

覆盖标签内嵌标签顶部标签


<FloatLabel>
    <InputText id="over_label" v-model="value1" />
    <label for="over_label">Over Label</label>
</FloatLabel>

<FloatLabel variant="in">
    <InputText id="in_label" v-model="value2" variant="filled" />
    <label for="in_label">In Label</label>
</FloatLabel>

<FloatLabel variant="on">
    <InputText id="on_label" v-model="value3" />
    <label for="on_label">On Label</label>
</FloatLabel>

Ifta 标签 #

IftaLabel 用于创建内联顶部对齐标签。请访问 Ifta 标签文档了解更多信息。

用户名


<IftaLabel>
    <InputText id="username" v-model="value" variant="filled" />
    <label for="username">Username</label>
</IftaLabel>

尺寸 #

InputText 提供 small 和 large 尺寸作为基础尺寸的替代方案。


<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" />
    <Message size="small" severity="secondary" variant="simple">Enter your username to reset your password.</Message>
</div>

无效 #

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


<InputText v-model="value1" :invalid="!value1" placeholder="Name" />
<InputText v-model="value2" :invalid="!value2" variant="filled" placeholder="Name" />

禁用 #

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


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

可访问性 #

屏幕阅读器

InputText 组件渲染一个本地输入元素，该元素隐式包含任何传递的属性。用于描述组件的值可以通过与 id 属性组合的 label 标签或使用 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	将焦点移动到输入框。