Input

介紹使用 Input 輸入框元件

Input 輸入框是一種可以讓網頁與使用者互相傳遞訊息的元件，而訊息又具有多種類型，例如：密碼、單行文字、多行文字，其中密碼類型必須考量使用者在填寫時，盡量不要讓人看到，或是有時候會忘記自己打到哪邊，所以會設置一個按鈕，將隱藏的文字重新顯示。另外，使用者也會需要用到清除的按鈕以快速清除然後重新輸入內容。

注意

使用 <bpa-input :id="{id}"> 時，需要 <label :for="{id}">
但如果是在 <bpa-form-item :labelFor="{id}"> 裡面時，就不需要加 <label>。

<label for="test">Label</label>
<bpa-input id="test"/>
...
<bpa-form-item :labelFor="test">
    <bpa-input id="test"/>
</bpa-form-item>

大小

<bpa-input v-model="value" size="small"/>

提示文字

<bpa-input v-model="value" placeholder="Please enter here!"/>

禁用

<bpa-input v-model="value" disabled/>

必填

<bpa-input v-model="value" required/>

唯讀

<bpa-input v-model="value" readonly/>

錯誤提示

<bpa-input v-model="value" error/>

快捷鍵

<bpa-input v-model="value" accesskey="K"/>

隱藏清除按鈕

<bpa-input v-model="value" disabledClear/>

類型

<!-- password -->
<bpa-input v-model="value" type="password"/>

<!-- multiple lines -->
<bpa-input v-model="value" type="textarea"/>

屬性

Name	Value	Type	Default	Required	Note
id
value		[ String, Number ]
size	small, large
type
placeholder
disabled
required
readonly
error
accesskey
disabledClear

Demo