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 文件以取得更多資訊。

Over LabelIn LabelOn Label


<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>

內嵌頂對齊標籤 #

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" />

輔助文字 #

可以使用 Message 元件定義建議文字。

使用者名稱


<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	將焦點移至輸入欄位。