InputText

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 用于创建内联顶部对齐的标签。有关更多信息，请访问 IftaLabel 文档。

用户名


<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 prop 显示无效状态，以指示验证失败。在与表单验证库集成时可以使用此样式。


<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 组件呈现一个原生输入元素，该元素隐式包含任何传递的 prop。描述组件的值可以通过结合id prop 的label标签或使用aria-labelledby、aria-label prop 提供。


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

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

<InputText aria-label="Age"/>

键盘支持

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